@font-face{font-family:'Bodoni Moda';src:url(fonts/bodoni-moda.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(fonts/bodoni-moda-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url(fonts/dm-sans.woff2) format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
/* Colores y medidas principales: --red es el rojo Bodonia, --ink el texto, --muted el gris. */
:root{--red:#a32429;--ink:#202020;--muted:#646464;--line:#dededb;--paper:#fff;--gutter:32px;--gap:16px;--card:min(calc((100vw - 2 * var(--gutter) - 3 * var(--gap))/4),calc((100dvh - 300px)*.8));--serif:'Bodoni Moda','Bodoni 72',Didot,serif;--sans:'DM Sans',Arial,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{height:100dvh;min-width:320px;display:grid;grid-template-rows:88px minmax(0,1fr) 76px;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15.6px;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;border:0;border-radius:0;background:none;padding:0}a{color:inherit;text-decoration:none}button:disabled{opacity:.3;cursor:default}button:active:not(:disabled){transform:translateY(1px)}svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.2;flex-shrink:0}::selection{background:#a3242928;color:var(--ink)}:focus-visible{outline:2px solid var(--red);outline-offset:4px}input,textarea{caret-color:var(--red)}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter)}.brand{display:block}.brand img{display:block;width:124px;height:auto}.site-header nav{display:flex;gap:32px;align-items:center}.site-header nav a,.site-header nav button{padding:12px 0;font-size:14.4px}.site-header [aria-current]{color:var(--red)}
main{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.intro{padding:24px var(--gutter) 32px;display:grid;grid-template-columns:1fr;align-content:start;align-items:start;gap:14px}.intro h1{font:400 28.8px/1.25 var(--serif);letter-spacing:-.015em;margin:0}.intro p{margin:0;width:min(100%,620px);font-size:15.6px;line-height:1.7}.works{min-width:0;align-self:center}.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;height:52px;margin:0 var(--gutter)}.filters{display:flex;gap:24px}.filters button{position:relative;color:var(--muted);min-height:40px;font-size:14.4px}.filters button[aria-pressed=true]{color:var(--red)}.filters button[aria-pressed=true]::after{content:'';position:absolute;bottom:6px;left:0;right:0;height:1px;background:currentColor}.result-count{font-size:14.4px;color:var(--muted)}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:var(--card);gap:var(--gap);overflow-x:auto;overflow-y:hidden;padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;cursor:grab;outline-offset:-2px}.gallery::-webkit-scrollbar{display:none}.gallery.dragging,.gallery.dragging button{cursor:grabbing}.gallery.dragging .alternate{opacity:0!important}.project{min-width:0;margin:0}.project[hidden]{display:none}.project-image{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:#eae9e5;isolation:isolate;user-select:none;cursor:inherit}.project-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.project-image .cover{object-position:center}.project-image.book .cover{object-position:left;transform:scale(1.25);transform-origin:25% 50%}.project-image.right .cover{object-position:right}.project-image .alternate{opacity:0;transition:opacity 250ms var(--ease);object-position:right}.project-image.book .alternate{object-position:right}.project-image.center .alternate{transform:scale(1.5)}.project-image:focus-visible .alternate{opacity:1;transition:none}.project-caption{display:flex;flex-direction:column;gap:4px;padding-top:12px;min-height:58px}.project-caption h2{font:400 14.4px/1.35 var(--sans);margin:0;text-wrap:pretty}.project-caption>span{color:var(--muted);font-size:14.4px;line-height:1.3}.site-footer{padding:0 var(--gutter);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}.gallery-controls{display:flex;align-items:center;gap:14px}.gallery-controls button,.project-dialog footer button{display:grid;place-items:center;width:36px;height:40px}.gallery-controls button:first-child svg,.project-dialog footer button:first-child svg{transform:rotate(180deg)}#position{font-size:14.4px;font-variant-numeric:tabular-nums;min-width:78px;text-align:center}.scroll-note{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--muted);font-size:14.4px}.scroll-note svg{width:30px}.contact-link{justify-self:end;display:flex;gap:16px;align-items:center;font:400 24px/1.2 var(--serif);color:var(--red);padding:8px 0}
dialog{color:var(--ink);border:0;background:var(--paper);padding:0;max-height:calc(100dvh - 48px);scrollbar-width:thin;scrollbar-color:var(--red) var(--paper)}dialog::backdrop{background:rgb(0 0 0 / 35%)}dialog[open]{animation:dialog-in 230ms var(--ease)}@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.text-dialog{width:min(880px,calc(100vw - 48px));max-width:none}.close{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:44px;height:44px;z-index:2}.dialog-content{padding:64px}.dialog-content>h2{font:400 clamp(33.6px,3.6vw,43.2px)/1.2 var(--serif);letter-spacing:-.035em;margin:0 0 32px}.dialog-content>p{font-size:18px;line-height:1.8;max-width:65ch;margin:0 0 24px}.dialog-content .promise{font-family:var(--serif);font-size:30px;line-height:1.35}.text-link{color:var(--red);border-bottom:1px solid currentColor;padding:7px 0;width:max-content;font-size:15.6px}.services{margin:0}.services>div{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}.services dt{font:400 27.6px/1.3 var(--serif)}.services dd{margin:0;line-height:1.7;color:var(--muted)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}.contact-details{display:flex;flex-direction:column;align-items:start;gap:12px}.contact-details>a:not(.map-link){font:400 30px/1.3 var(--serif)}.contact-details p{line-height:1.7;margin:14px 0 0}.map-link{color:var(--red);margin-top:12px;text-decoration:underline;text-underline-offset:4px}form{display:flex;flex-direction:column;gap:20px}form label{display:flex;flex-direction:column;gap:8px;font-size:14.4px}input,textarea{border:0;border-bottom:1px solid var(--line);border-radius:0;background:white;min-width:0;width:100%;padding:8px 0;resize:vertical;font-size:19.2px}input:focus,textarea:focus{outline:0;border-color:var(--red)}form small{color:var(--muted);font-size:14.4px;line-height:1.6}.project-dialog{width:calc(100vw - 48px);height:calc(100dvh - 48px);max-width:none;overflow:hidden}.project-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) 52px}.project-dialog header{padding:24px 72px 20px 28px}.project-dialog h2{font:400 30px/1.25 var(--serif);margin:0}.project-dialog header p{font-size:14.4px;color:var(--muted);margin:6px 0 0}.project-view{min-height:0;background:#eeede9;display:flex;align-items:center;justify-content:center}.project-view img{width:100%;height:100%;object-fit:contain}.project-dialog footer{display:flex;align-items:center;justify-content:center;gap:24px}.project-dialog footer span{font-size:14.4px;font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){.project-image:hover .alternate{opacity:1}.site-header a:hover,.site-header button:hover,.filters button:hover{color:var(--red)}.contact-link:hover svg{transform:translateX(4px)}.contact-link svg{transition:transform 180ms var(--ease)}}
@media(min-width:1600px){:root{--card:calc((100vw - 2 * var(--gutter) - 4 * var(--gap))/5)}}
@media(max-width:900px){:root{--gutter:24px;--card:calc((100vw - 2 * var(--gutter) - 2 * var(--gap))/3)}.intro p{width:auto}.site-header nav{gap:24px}.intro h1{font-size:28.8px}}
@media(max-width:600px){:root{--gutter:20px;--gap:12px;--card:calc((100vw - 2 * var(--gutter) - var(--gap))/2)}body{grid-template-rows:76px minmax(0,1fr) 68px}.brand img{width:112px}.site-header nav{gap:16px}.site-header nav a{display:none}.site-header nav button{font-size:14.4px}.intro{grid-template-columns:1fr;align-content:start;gap:14px;padding-top:24px;padding-bottom:20px}.intro h1{font-size:28.8px;line-height:1.25}.intro p{margin:0;font-size:14.4px;line-height:1.6}.gallery-toolbar{height:50px}.filters{gap:18px}.filters button{font-size:14.4px}.result-count{display:none}.project-image{max-height:none}.project-caption{min-height:76px;padding-top:10px;gap:5px}.project-caption h2{font-size:14.4px}.site-footer{grid-template-columns:1fr auto}.gallery-controls{gap:6px}.gallery-controls button{width:28px}.scroll-note{display:none}.contact-link{font-size:24px;gap:16px}.dialog-content{padding:64px 24px 32px}.text-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.dialog-content>h2{font-size:33.6px}.contact-grid{grid-template-columns:1fr;gap:36px}.services>div{grid-template-columns:1fr;gap:8px}.project-dialog{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-height:none}.project-dialog h2{font-size:26.4px}.project-dialog header{padding-left:20px}.close{right:12px;top:12px}}
@media(max-height:600px) and (min-width:601px){body{grid-template-rows:66px minmax(0,1fr) 52px}.intro{padding-block:0;min-height:80px}.intro h1{font-size:31.2px}.intro p{font-size:14.4px}.gallery-toolbar{height:40px}.project-image{max-height:none}.project-caption{min-height:56px}.contact-link{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.project-image > .alternate{position:absolute;inset:0;display:block;background:#e9e8e4;pointer-events:none}.detail-crop{position:absolute;left:5%;top:50%;width:90%;aspect-ratio:1.286;overflow:hidden;transform:translateY(-50%)}.project-image .detail-crop img{inset:auto;width:370.37%;height:auto;max-width:none;left:-156.3%;top:-40%;object-fit:initial}
.gallery{margin-inline:var(--gutter);padding-inline:0}
.project-image{container-type:size}.project-image .crop-layer{position:absolute;inset:0;display:block;background:#e0dfda;transform:none!important}.media-crop{position:absolute;left:50%;top:50%;width:min(90cqw,84cqh * var(--ratio));aspect-ratio:var(--ratio);transform:translate(-50%,-50%);overflow:hidden}.project-image .media-crop img{position:absolute;inset:auto;height:auto;max-width:none;object-fit:initial}.project[data-index="6"] .crop-layer{background:#b7b1a7}.project[data-index="16"] .cover{object-fit:contain;background:#dddcd7}

.project-image .cover.whole{object-fit:contain;background:#e3e2de}

/* Supplied photography fills the existing 4:5 grid without the composite-sheet zoom. */
.project-image.book .cover.mockup{object-fit:cover;object-position:center;transform:none}



/* Larger editorial grid: the available height determines the 4:5 frames. */
:root{--gutter:24px;--gap:16px;--card:min(calc((100vw - 2 * var(--gutter) - 2 * var(--gap))/3),calc((100dvh - 276px)*.8))}
body{grid-template-rows:68px minmax(0,1fr) 56px}
main{grid-template-rows:76px minmax(0,1fr)}
.intro{grid-template-columns:1fr 1fr;align-items:center;align-content:center;gap:24px;padding:0 var(--gutter)}
.intro h1{font-size:26.4px;line-height:1.25}
.intro p{width:auto;justify-self:end;font-size:14.4px;line-height:1.55}
.works{align-self:center}
.gallery-toolbar{height:40px}
.project-caption{min-height:56px;padding-top:12px;gap:5px}
.gallery{scrollbar-width:none}
.project-image .cover.mockup{will-change:transform}
.contact-link{font-size:22.8px}
@media(max-width:900px){:root{--card:min(calc((100vw - 2 * var(--gutter) - var(--gap))/2),calc((100dvh - 276px)*.8))}.intro h1{max-width:320px;font-size:26.4px}}
@media(max-width:600px){:root{--gutter:16px;--gap:12px;--card:min(calc(100vw - 56px),calc((100dvh - 280px)*.8))}body{grid-template-rows:64px minmax(0,1fr) 56px}main{grid-template-rows:92px minmax(0,1fr)}.intro{grid-template-columns:1fr;gap:8px;padding:4px var(--gutter)}.intro h1{font-size:25.2px;max-width:none}.intro p{justify-self:start;font-size:14.4px}.intro p br{display:none}.intro p br::after{content:' '}.intro p{max-width:320px}.gallery-toolbar{height:40px}.filters{gap:16px}.project-caption{min-height:62px}.site-header nav{gap:14px}.contact-link{font-size:22.8px}}
@media(max-height:600px) and (min-width:601px){body{grid-template-rows:52px minmax(0,1fr) 44px}main{grid-template-rows:62px minmax(0,1fr)}:root{--card:calc((100dvh - 248px)*.8)}.intro{min-height:0}.intro h1{font-size:24px}.gallery-toolbar{height:34px}}
@media(prefers-reduced-motion:reduce){.project-image .cover.mockup{will-change:auto}}

/* Lundani-style introduction with uninterrupted project imagery. */
body{grid-template-rows:76px minmax(0,1fr)}
.site-header nav{gap:8px}
.site-header nav button{min-height:38px;padding:9px 18px;border:1px solid #e2e2de;border-radius:999px;background:#f6f6f3;font-size:14.4px;line-height:18px;transition:background-color 180ms ease,color 180ms ease,transform 180ms var(--ease)}
.site-header nav .contact-chip{color:#fff;background:var(--red);border-color:var(--red)}
main{grid-template-rows:minmax(0,1fr) auto;padding-bottom:36px}
.intro{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:18px var(--gutter) 28px}
.intro h1{max-width:none;font-size:clamp(36px,4vw,55.2px);line-height:1.12;letter-spacing:-.025em}
.intro p{max-width:620px;width:100%;margin:0;font-size:16.8px;line-height:1.6;text-wrap:pretty}
.works{align-self:end}
@media(hover:hover) and (pointer:fine){.site-header nav button:hover{background:#eaeae5;color:var(--ink)}.site-header nav .contact-chip:hover{background:#851e22;color:#fff}}
@media(max-width:600px){body{grid-template-rows:72px minmax(0,1fr)}main{grid-template-rows:minmax(0,1fr) auto;padding-bottom:28px}.brand img{width:94px}.site-header nav{gap:5px}.site-header nav button{min-height:36px;padding:8px 10px;font-size:14.4px}.intro{display:flex;gap:16px;padding:20px var(--gutter) 28px}.intro h1{font-size:36px;max-width:360px}.intro p{font-size:15.6px;line-height:1.6;max-width:360px}}
@media(max-width:360px){.brand img{width:78px}.site-header nav button{padding-inline:8px}}
@media(max-height:600px) and (min-width:601px){body{grid-template-rows:60px minmax(0,1fr)}main{grid-template-rows:minmax(0,1fr) auto;padding-bottom:24px}.intro{min-height:0;gap:12px;padding:12px var(--gutter) 20px}.intro h1{font-size:36px}.intro p{font-size:15.6px}}

/* Galería editable: cada trabajo tiene una foto de portada y otra de detalle (al pasar el ratón). */
.project-image img.detalle{object-fit:cover;object-position:center;transform:none}

/* Enlaces legales y formulario */
.legal-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:20px;font-size:14.4px;color:var(--muted)}
.legal-links a,form small a{text-decoration:underline;text-underline-offset:3px}
.form-status{color:var(--red);font-size:15.6px;line-height:1.6;margin:0}.form-status:empty{display:none}
@media(hover:hover) and (pointer:fine){.legal-links a:hover,form small a:hover{color:var(--red)}}

/* Páginas sencillas (información legal, gracias, 404) */
html.pagina,html.pagina body{height:auto;overflow:auto}
html.pagina body{display:block;min-height:100dvh}
.pagina main{display:block;padding:24px var(--gutter) 64px}
.pagina .intro{padding:24px 0 32px}
.pagina .intro a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.pagina .site-header nav a{min-height:38px;padding:9px 18px;border-radius:999px;font-size:14.4px;line-height:18px;color:#fff;background:var(--red)}
.legal{border-top:1px solid var(--line);max-width:880px}.legal:last-of-type{border-bottom:1px solid var(--line)}
.legal summary{cursor:pointer;font:400 27.6px/1.3 var(--serif);padding:18px 0}
.legal-b{display:flex;flex-direction:column;gap:12px;font-size:16.8px;line-height:1.7;color:var(--muted);max-width:70ch;padding:0 0 28px}
.legal-b p{margin:0}.legal-b .legal-h{color:var(--ink);font-weight:500}

/* Logo interactivo de la variante loca: sustituye al titular y a los textos de la portada */
.pieza{display:inline-flex;flex-direction:column;width:1.02em;color:#F6F4EF;font-style:italic;font-weight:500;filter:drop-shadow(.05em .07em .05em rgba(0,0,0,.45));transition:transform .3s ease}
@media(hover:hover){.pieza:hover{transform:rotate(0deg) translateY(-8px)!important}}
.cara{display:flex;align-items:center;justify-content:center;height:.6em;font-size:.8em;transform:skewX(-24deg);transform-origin:bottom left;border-bottom:.04em solid #0E0F10;background:repeating-linear-gradient(118deg,rgba(255,255,255,.13) 0 1px,transparent 1px 4px),repeating-linear-gradient(28deg,rgba(0,0,0,.22) 0 1px,transparent 1px 5px),linear-gradient(150deg,#8A8D91,#55585C 60%,#6F7276)}
.let{display:inline-block;transform:scaleX(-1) skewX(10deg)}
.pie{position:relative;display:flex;align-items:center;justify-content:center;height:1.06em;font-size:.84em;background:repeating-linear-gradient(104deg,rgba(255,255,255,.09) 0 1px,transparent 1px 3px),repeating-linear-gradient(12deg,rgba(0,0,0,.28) 0 1px,transparent 1px 4px),linear-gradient(170deg,#4A4D51,#202124 55%,#34373A)}
.pie::before{content:"";position:absolute;left:0;top:.2em;width:.34em;height:.05em;background:#C9CBCE;box-shadow:0 .04em 0 #0A0A0B}
.pieza,.tipo,.fila .foto{transition:transform .28s cubic-bezier(.23,1,.32,1)}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden}
:root{--logo:6.2vw}
.site-header{justify-content:flex-end}
.intro{display:block;padding:4px var(--gutter) 12px}
.intro .brand{display:inline-block}
.logo{margin:0;display:flex;flex-direction:column;gap:.12em;font-size:var(--logo);line-height:1;font-weight:400}
.logo>span[aria-hidden]:first-of-type{padding-left:.3em}
:root{--card:min(calc((100vw - 2 * var(--gutter) - 2 * var(--gap))/3),calc((100dvh - 76px - 2.3 * var(--logo) - 84px)*.8))}
@media(max-width:900px){:root{--card:min(calc((100vw - 2 * var(--gutter) - var(--gap))/2),calc((100dvh - 76px - 2.3 * var(--logo) - 84px)*.8))}}
@media(max-width:600px){:root{--card:min(calc(100vw - 56px),calc((100dvh - 76px - 2.3 * var(--logo) - 84px)*.8))}}

/* El titular-logo gana a las reglas generales de h1 de la página */
.intro .logo{font-size:var(--logo)!important;font-weight:400!important;letter-spacing:0!important;max-width:none!important}
.intro .logo .logo-sub{letter-spacing:0}

.servicios-pie{margin:24px 0 0;font:400 28.8px/1.3 var(--serif);color:var(--red)}

/* Logo en la esquina superior izquierda, a la altura de los botones */
@media(min-width:601px){
body{grid-template-rows:minmax(0,1fr)}
.site-header{position:absolute;top:0;left:0;right:0;z-index:3;pointer-events:none;height:76px}
.site-header nav{pointer-events:auto}
.intro{padding-top:19px}
:root{--card:min(calc((100vw - 2 * var(--gutter) - 2 * var(--gap))/3),calc((100dvh - 2.1 * var(--logo) - 120px)*.8))}
}
@media(min-width:601px) and (max-width:900px){:root{--card:min(calc((100vw - 2 * var(--gutter) - var(--gap))/2),calc((100dvh - 2.1 * var(--logo) - 120px)*.8))}}

/* Dos filas: la página baja con la rueda; cada fila se recorre en horizontal */
html:not(.pagina),html:not(.pagina) body{height:auto;overflow:visible}
html:not(.pagina) body{display:block;min-height:100dvh}
html:not(.pagina) main{display:block;padding-bottom:56px}
.works{align-self:auto}
.fila-titulo{margin:0 var(--gutter) 14px;font-size:14.4px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.works+.works{margin-top:64px}
.works .gallery{padding-bottom:4px}
@media(min-width:601px){.site-header{position:absolute}}
@media(max-width:600px){.site-header{position:relative}}

/* Pantalla de carga */
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--paper);transition:transform 1.1s cubic-bezier(.76,0,.24,1)}
.loader-logo{font:400 min(13vw,130px)/1 var(--serif);transition:transform 1.1s cubic-bezier(.76,0,.24,1),opacity .5s ease}
#loader .pieza{animation:aparece .7s cubic-bezier(.22,1,.36,1) both,levanta 1.1s ease-in-out .8s infinite;animation-delay:calc(var(--i) * .08s),calc(.8s + var(--i) * .12s)}
.loader-pie{position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;font-size:14.4px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.loader-cuenta{font:italic 400 clamp(67.2px,10.8vw,144px)/.8 var(--serif);letter-spacing:-.02em;color:#9A0015;font-variant-numeric:tabular-nums;text-transform:none}
.loader-barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:#9A0015;transform:scaleX(0);transform-origin:left}
#loader.hecho{transform:translateY(-100%)}
#loader.hecho .loader-logo{transform:translateY(40vh);opacity:0}
html.cargando{overflow:hidden}
html.entra .project-image{animation:destapa 1.3s cubic-bezier(.76,0,.24,1) both}
html.entra .project-image img.cover{animation:acerca 1.6s cubic-bezier(.22,1,.36,1) both}
html.entra .works:nth-child(2) .project-image{animation-delay:.15s}
html.entra .project:nth-child(2) .project-image{animation-delay:.08s}
html.entra .project:nth-child(3) .project-image{animation-delay:.16s}
html.entra .project:nth-child(4) .project-image{animation-delay:.24s}
html.entra .intro{animation:sube .9s cubic-bezier(.22,1,.36,1) .2s both}
@keyframes aparece{from{opacity:0;translate:0 .5em}to{opacity:1;translate:0 0}}
@keyframes levanta{0%,60%,100%{translate:0 0}25%{translate:0 -.22em}}
@keyframes destapa{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes acerca{from{scale:1.25}to{scale:1}}
@keyframes sube{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#loader,#loader .pieza,.loader-logo{animation:none;transition:none}html.entra *{animation:none!important}}

/* Qué hacemos: lista de productos a dos columnas */
.services{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:2px;margin:24px 0 0}
.services>div{display:block;padding:0;border:0}
.services dt{font:400 clamp(26.4px,3.6vw,38.4px)/1.35 var(--serif);margin:0}
@media(max-width:600px){.services dt{font-size:26.4px}}
.services{grid-auto-flow:column;grid-template-rows:repeat(8,auto)}
.servicios-pie{margin-top:32px}
@media(max-width:600px){.services{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr}}

/* Ventanas El taller y Qué hacemos: Bodoni en negro y rojo, con cursivas */
#about-dialog,#services-dialog{--rojo:#9A0015}
.titular{font:400 clamp(40.8px,6.5vw,72px)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 28px;max-width:14em;text-wrap:balance}
.titular em{font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--rojo)}
#about-dialog .dialog-content>p:not(.promise){font:400 clamp(21.6px,2.4vw,26.4px)/1.6 var(--serif);max-width:34em;margin:0 0 28px}
#about-dialog .promise{font:italic 400 clamp(28.8px,3.8vw,43.2px)/1.2 var(--serif);color:var(--rojo);margin:36px 0 24px;max-width:18em;text-wrap:balance}
#about-dialog .text-link{font:italic 400 24px/1.2 var(--serif);color:var(--ink);border-bottom:1px solid var(--rojo);padding-bottom:3px}
#about-dialog .text-link:hover{color:var(--rojo)}
.services dt{transition:color .2s ease}
.services>div:nth-child(3n+2) dt{font-style:italic}
.services dt:hover{color:var(--rojo)}
.servicios-pie{font:italic 400 clamp(31.2px,4.1vw,45.6px)/1.2 var(--serif);color:var(--rojo)}
.titular em{display:block}
#services-dialog .servicios-pie{font:italic 400 clamp(31.2px,4.1vw,45.6px)/1.2 var(--serif);color:var(--rojo);margin:36px 0 0}
.works+.works{margin-top:40px}
/* Qué hacemos: título en una línea, productos en redonda, pie en cursiva pequeña */
#services-dialog .titular{font-size:clamp(28.8px,4vw,48px);max-width:none}
#services-dialog .titular em{display:inline}
@media(min-width:700px){#services-dialog .titular{white-space:nowrap}}
#services-dialog .services>div dt{font-style:normal}
#services-dialog .servicios-pie{font-size:clamp(21.6px,2.2vw,26.4px);margin-top:28px}
/* El taller: titular y frase en una línea; ventanas con esquinas redondas y fondo desenfocado */
#about-dialog{width:min(1120px,calc(100vw - 48px))}
#about-dialog .titular{font-size:clamp(28.8px,3.6vw,48px);max-width:none}
#about-dialog .titular em{display:inline}
#about-dialog .promise{font-size:clamp(26.4px,3.1vw,40.8px);max-width:none}
@media(min-width:760px){#about-dialog .titular,#about-dialog .promise{white-space:nowrap}}
dialog{border-radius:22px;overflow:hidden}
dialog .dialog-content{overflow:auto;max-height:inherit}
dialog::backdrop{background:rgb(255 255 255 / 25%);-webkit-backdrop-filter:blur(7px) saturate(.9);backdrop-filter:blur(7px) saturate(.9)}

/* Flechas de cada fila */
.works{position:relative}
.fila-flecha{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border-radius:50%;background:rgb(255 255 255 / 88%);color:var(--ink);box-shadow:0 4px 18px rgb(0 0 0 / 18%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease,background .2s ease,color .2s ease}
.fila-flecha svg{width:22px;height:22px;stroke-width:1.5}
.fila-flecha.atras{left:calc(var(--gutter) + 12px)}.fila-flecha.atras svg{transform:rotate(180deg)}
.fila-flecha.adelante{right:calc(var(--gutter) + 12px)}
.works:hover .fila-flecha,.fila-flecha:focus-visible{opacity:1}
.fila-flecha:hover{background:#9A0015;color:#fff}
@media(hover:none){.fila-flecha{opacity:1;width:42px;height:42px;margin-top:-21px}}
/* Mismo espacio, y más pequeño, entre fotos y entre filas */
:root{--gap:8px}
.works+.works{margin-top:var(--gap)}
.works .gallery{padding-bottom:0}

/* Fotos grandes: alto según la pantalla, la segunda fila asoma por abajo */
@media(min-width:601px){
:root{--card:min(calc(var(--alto,520px) * .9),calc((100vw - 2 * var(--gutter)) / 1.7))}
.project-image{aspect-ratio:9/10}
}
/* Vista de trabajo a pantalla completa */
.project-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0;display:none;grid-template-rows:auto minmax(0,1fr) auto;background:var(--paper)}
.project-dialog[open]{display:grid;animation:none}
.project-dialog::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.project-dialog header{padding:22px var(--gutter) 14px;display:flex;justify-content:space-between;align-items:flex-start}
.project-dialog h2{font:400 clamp(28.8px,3.1vw,43.2px)/1.1 var(--serif);margin:0}
.project-dialog #project-type{font:italic 400 21.6px/1.3 var(--serif);color:#9A0015;margin:4px 0 0}
.project-dialog .close{position:static}
.project-track{display:flex;gap:var(--gap);overflow-x:auto;padding:0 var(--gutter);scrollbar-width:none;cursor:grab;scroll-snap-type:x proximity}
.project-track::-webkit-scrollbar{display:none}
.escena{margin:0;flex:0 0 auto;height:100%;scroll-snap-align:start}
.escena img{height:100%;width:auto;max-width:none;display:block;user-select:none;pointer-events:none;background:#eae9e5}
.project-dialog footer{padding:12px var(--gutter) 18px;display:flex;justify-content:flex-end;gap:8px}
.vuelo{position:fixed;z-index:5;object-fit:cover;margin:0;pointer-events:none}
.project-dialog.volando .escena:first-child img{opacity:0}
.project-dialog.volando header,.project-dialog.volando footer,.project-dialog.volando .escena:not(:first-child){animation:aparece-v .6s ease .55s both}
.project-dialog.volando{background:transparent;animation:fondo-v .5s ease both}
.project-dialog.cerrando{animation:fondo-out .6s ease both}
.project-dialog.cerrando header,.project-dialog.cerrando footer,.project-dialog.cerrando .escena:not(:first-child){animation:none;opacity:0}
@keyframes fondo-v{from{background:rgb(255 255 255 / 0)}to{background:var(--paper)}}
@keyframes fondo-out{from{background:var(--paper)}to{background:rgb(255 255 255 / 0)}}
@keyframes aparece-v{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@media(max-width:600px){.escena img{height:auto;width:calc(100vw - 2 * var(--gutter))}.escena{height:auto}.project-track{align-items:center}}

/* Logo y botones flotando encima de las fotos, fijos al bajar; sin franja blanca arriba */
:root{--logo:clamp(24px,2.5vw,42px)}
.intro{position:fixed;top:0;left:0;z-index:20;padding:16px var(--gutter) 0!important;pointer-events:none}
.intro .brand{pointer-events:auto;filter:drop-shadow(0 2px 10px rgb(255 255 255 / 55%))}
.site-header{position:fixed!important;top:0;left:0;right:0;z-index:21;height:auto!important;padding:16px var(--gutter)!important;background:transparent!important;border:0!important;pointer-events:none;display:flex;justify-content:flex-end}
.site-header nav{pointer-events:auto}
.site-header nav button{background:rgb(255 255 255 / 72%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:transparent}
html:not(.pagina) main{padding-top:var(--gutter)}
@media(max-width:600px){:root{--logo:22px}.intro{padding-top:12px!important}.site-header{padding:10px 12px!important}html:not(.pagina) main{padding-top:calc(var(--logo) * 2.4 + 24px)}}
:root{--logo:clamp(28px,3vw,50px)}
.intro .logo>span[aria-hidden]:last-child{text-shadow:0 0 6px #fff,0 0 12px #fff}
@media(min-width:601px){
:root{--card:min(calc(var(--alto,520px) * .82),calc((100vw - 2 * var(--gutter)) / 2.5))}
.project-image{aspect-ratio:auto;height:var(--alto,520px)}
}
@media(max-width:600px){
:root{--logo:20px}
.site-header{top:auto!important;bottom:0;justify-content:center;padding:0 12px calc(14px + env(safe-area-inset-bottom,0px))!important}
.site-header nav button{box-shadow:0 4px 16px rgb(0 0 0 / 14%)}
html:not(.pagina) main{padding-top:calc(var(--logo) * 2.3 + 22px);padding-bottom:80px}
}

/* Logo centrado arriba */
.intro{left:50%!important;transform:translateX(-50%);padding-left:0!important;padding-right:0!important}
@media(max-width:600px){.intro{padding-top:12px!important}}
/* Efecto al pasar el ratón (como la referencia): crece, los demás se oscurecen y dentro pasan las escenas */
@media(min-width:601px){
.gallery{display:flex}
.gallery .project{flex:0 0 var(--card);transition:flex-basis .45s var(--ease)}
.gallery .project.activo{flex-basis:calc(var(--card) * 1.24)}
}
.project-image .cover{transition:filter .5s ease}
.gallery.con-activo .project:not(.activo) .cover{filter:brightness(.92) saturate(.96)}
.project-image .alternate{display:none}
.carrusel{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:3/4;transform:translate(-50%,-50%) scale(.6);opacity:0;overflow:hidden;box-shadow:0 18px 40px rgb(0 0 0 / 35%);transition:opacity .35s ease,transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:2;background:#eae9e5}
.carrusel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project.activo .carrusel{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Fondo negro de la web (entre fotos y alrededor); las ventanas siguen blancas */
html:not(.pagina),html:not(.pagina) body{background:#0b0b0b}
.project-dialog{background:#0b0b0b;color:#f4f2ee}
.project-dialog .close,.project-dialog footer button{color:#f4f2ee}
.project-dialog #project-type{color:#d4475a}
@keyframes fondo-v{from{background:rgb(11 11 11 / 0)}to{background:#0b0b0b}}
@keyframes fondo-out{from{background:#0b0b0b}to{background:rgb(11 11 11 / 0)}}
.escena img{background:#1a1a1a}
/* Logo a la izquierda, sin halo */
.intro{left:0!important;transform:none;padding-left:var(--gutter)!important}
.intro .brand{filter:none}
.intro .logo>span[aria-hidden]:last-child{text-shadow:none}

/* Puntero B */
#cursor-b{position:fixed;left:0;top:0;z-index:30;width:52px;height:auto;pointer-events:none;opacity:0;transition:opacity .25s ease;filter:drop-shadow(0 8px 14px rgb(0 0 0 / 45%));will-change:transform}
#cursor-b.visible{opacity:1}
@keyframes b-late{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(hover:hover) and (pointer:fine){.gallery .project-image,.gallery.dragging,.gallery.dragging button{cursor:none}}
@media(hover:none),(prefers-reduced-motion:reduce){#cursor-b{display:none}}
/* Pantalla de carga en negro */
#loader{background:#0b0b0b}
.loader-pie{color:#f4f2ee}
.loader-cuenta{color:#c8243a}
.loader-barra{background:#c8243a}
#cursor-b{width:42px}
/* Degradado oscuro y suave arriba, para que el logo se lea sin parecer un parche */
html:not(.pagina) body::before{content:"";position:fixed;left:0;right:0;top:0;height:clamp(140px,22vh,220px);z-index:19;pointer-events:none;background:linear-gradient(to bottom,rgb(11 11 11 / 72%) 0%,rgb(11 11 11 / 38%) 45%,rgb(11 11 11 / 0) 100%)}
.intro .logo>span[aria-hidden]:last-child{color:#d8344a!important}
/* Botones El taller / Qué hacemos / Hablemos en Bodoni */
.site-header nav button{font-family:var(--serif)!important;font-size:18px!important;letter-spacing:0;font-weight:400}

/* Diseño, maquetación e impresión: lema bajo el logo, antetítulos y franja final */
.intro .lema{margin:6px 0 0;font:500 13.2px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#f4f2ee;opacity:.85}
.antetitulo{margin:0 0 14px;font:500 13.2px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#9A0015}
.pie-imprenta{color:#f4f2ee;padding:96px var(--gutter) 72px;display:grid;gap:22px;max-width:1100px}
.pie-palabras{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:0 .5em;font:italic 400 clamp(48px,8.4vw,124.8px)/1 var(--serif);color:#f4f2ee}
.pie-palabras li:not(:last-child)::after{content:" ·";color:#c8243a}
.pie-palabras li:last-child{color:#c8243a}
.pie-imprenta .titular{color:#f4f2ee;margin:0}
.pie-imprenta .titular em{display:inline;color:#c8243a}
.pie-imprenta p{margin:0;max-width:40em;font:400 clamp(20.4px,1.9vw,24px)/1.6 var(--serif);color:#cfcac2}
@media(max-width:600px){.intro .lema{font-size:10.8px;letter-spacing:.1em}.pie-imprenta{padding:64px var(--gutter) 110px}}

/* Ventanas con fondo negro */
.text-dialog{--ink:#f4f2ee;--paper:#0b0b0b;--muted:#a8a39b;--line:#2e2e2e;--red:#d8344a;--rojo:#d8344a;background:#0b0b0b;color:#f4f2ee;border:1px solid #232323}
.text-dialog .antetitulo{color:#d8344a}
.text-dialog input,.text-dialog textarea{color:#f4f2ee;background:transparent;border-color:#3a3a3a}
.text-dialog a,.text-dialog button{color:inherit}
.text-dialog .close{color:#f4f2ee}
dialog::backdrop{background:rgb(0 0 0 / 55%)}
/* Lema fijo en el centro de la barra de arriba, entre el logo y los botones */
.site-header .lema{position:absolute;left:50%;top:28px;transform:translateX(-50%);margin:0;font:500 clamp(14.4px,1.3vw,18px)/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#f4f2ee;white-space:nowrap;text-shadow:0 1px 12px rgb(0 0 0 / 55%);pointer-events:none}
@media(max-width:900px){.site-header .lema{display:none}}
.text-dialog{--red:#ee4a62;--rojo:#ee4a62}
.text-dialog .antetitulo{color:#ee4a62;white-space:nowrap}

/* Ventanas en gris con el estilo de Variante loca: 35 enorme, subrayado rojo y cinta de palabras */
@font-face{font-family:'Bodoni Moda';src:url(fonts/bodoni-moda-black-italic.woff2) format('woff2');font-weight:900;font-style:italic;font-display:swap}
.text-dialog{--paper:#38393b;background:#38393b;border-color:#4a4b4e;--muted:#bdb9b1;--line:#505155}
.text-dialog input,.text-dialog textarea{border-color:#6a6b6f}
.titular em{background:#9A0015;color:#fff!important;padding:0 .2em;font-style:italic;font-weight:900;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.titular{font-weight:900;font-style:italic}
.titular span{font-weight:400;font-style:normal}
.gran35{position:absolute;right:56px;top:34px;font:900 italic clamp(120px,17vw,230px)/.78 'Bodoni Moda',serif;letter-spacing:-.06em;color:#f4f2ee;opacity:.12;pointer-events:none}
#about-dialog .dialog-content,#services-dialog .dialog-content{position:relative}
.services dt{font-weight:400}
.services>div:nth-child(3n+2) dt{font-style:italic;font-weight:900}
.marq{overflow:hidden;white-space:nowrap;display:flex;border-top:1px solid #505155;padding:14px 0;background:#9A0015;color:#fff;font:italic 900 clamp(15px,1.5vw,20px)/1 'Bodoni Moda',serif;letter-spacing:.04em}
.marq div{flex-shrink:0;animation:corre 26s linear infinite;padding-right:1.5em}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.marq div{animation:none}}
html:not(.pagina) main{padding-bottom:var(--gutter)}
#about-dialog .promise,#services-dialog .servicios-pie{color:#f4f2ee!important}
.gran35{top:auto;bottom:34px;right:40px}
#about-dialog .dialog-content{padding-bottom:70px}
#about-dialog .titular{font-size:clamp(26.4px,3vw,40.8px)}
.site-header .lema{top:36px;font-weight:800;font-size:clamp(15.6px,1.4vw,20.4px)}
/* Ventanas en gris claro; sin cinta roja; lista de productos en una sola tipografía */
.text-dialog{--paper:#e9e8e4;background:#e9e8e4;color:#1d1d1d;--ink:#1d1d1d;--muted:#55534e;--line:#cfcdc7;--red:#9A0015;--rojo:#9A0015;border-color:#d6d4cf}
.text-dialog .antetitulo,.text-dialog .close{color:#9A0015}
.text-dialog input,.text-dialog textarea{color:#1d1d1d;border-color:#9a988f}
.text-dialog .promise,.text-dialog .servicios-pie,.text-dialog .text-link{color:#9A0015!important}
.marq{display:none!important}
.services dt,.services>div:nth-child(3n+2) dt{font-style:normal!important;font-weight:400!important}
.titular em{background:#9A0015;color:#fff!important}
#about-dialog .promise,#services-dialog .servicios-pie{color:#9A0015!important}
/* Letras de la cara superior: sin espejo, se leen de izquierda a derecha y encajan en el bloque */
.cara .let{transform:skewX(10deg);font-size:1em;line-height:1;white-space:nowrap}
.cara{overflow:visible}
/* La cara superior es un poco más alta y la letra cabe dentro */
.cara{height:.74em!important}
.cara .let{font-size:.78em!important;line-height:1.05;padding:.02em 0}

.cara .let.let-inversa{transform:scaleX(-1) skewX(10deg)}
/* Ventanas: tipografía más ligera */
.titular,.titular em{font-weight:400!important}
.gran35{font-weight:400}

/* Última pieza (a/A) puesta del revés: el pie queda arriba */
.pieza .cara .let.let-inversa{transform:skewX(10deg)}

/* Última pieza como antes; solo la letra de arriba (a minúscula) girada 180 grados */
.pieza .cara .let.let-inversa{transform:skewX(10deg) rotate(180deg)}
/* Todo el texto de las ventanas en Bodoni */
.text-dialog,.text-dialog *,.text-dialog input,.text-dialog textarea,.text-dialog button{font-family:var(--serif)!important}
.text-dialog .antetitulo{font-weight:500}
#contact-dialog p,#contact-dialog label,#contact-dialog small,#contact-dialog .legal-links,#contact-dialog button,#contact-dialog .map-link{font-size:18px!important}
#contact-dialog input,#contact-dialog textarea{font-size:20.4px!important}

/* Logo como el original: N en espejo y la a de la última pieza tumbada */
.pieza .cara .let.let-espejo{transform:skewX(10deg) scaleX(-1)}
.pieza .cara .let.let-inversa{transform:skewX(10deg) rotate(-90deg)}
.pieza .cara .let.let-inversa{transform:skewX(10deg) rotate(-90deg) scaleY(-1)}
.pieza .cara .let.let-inversa{transform:skewX(10deg) rotate(-45deg) scaleY(-1)}
.pieza .cara .let.let-inversa{transform:skewX(10deg) rotate(-10deg) scaleY(-1)}
.pieza .cara .let.let-inversa{display:inline-block;transform-origin:50% 50%;line-height:1;transform:rotate(25deg) scaleY(-1)}
.pieza .cara:has(.let-inversa){display:flex!important;align-items:center!important;justify-content:center!important}
.pieza .cara .let.let-inversa{position:static!important;margin:0!important}
.pieza .cara .let.let-inversa{transform:rotate(25deg) scaleY(-1) translateY(.2em)}
.pieza .cara .let.let-inversa{transform:rotate(25deg) scaleY(-1) translateY(-.22em)}
/* Visor: cada imagen entera, con su proporción, lo más grande que quepa en pantalla */
.project-dialog header{padding:14px 72px 10px 28px}
.escena{height:100%;display:flex;align-items:center;justify-content:center}
.escena img{height:auto;width:auto;max-height:100%;max-width:calc(100vw - 2 * var(--gutter));object-fit:contain}
/* Escenas al pasar el ratón: postales que se van apilando */
.carrusel{overflow:visible;box-shadow:none;background:none}
.postal{position:absolute;inset:0;background:#f3f1ec;padding:5px;box-shadow:0 12px 28px rgb(0 0 0 / 40%);transform:translate(var(--x),var(--y)) rotate(var(--r));animation:postal .45s cubic-bezier(.22,1,.36,1) both}
.postal img{position:static;display:block;width:100%;height:100%;object-fit:cover}
@keyframes postal{from{opacity:0;transform:translate(var(--x),calc(var(--y) - 18%)) rotate(calc(var(--r) + 10deg)) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.postal{animation:none}}
/* Cada postal con la proporción de su foto, vertical u horizontal, sin recortar */
.carrusel{width:44%;aspect-ratio:1/1}
.postal{inset:auto;left:50%;top:50%;width:auto;height:auto;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r))}
.postal img{width:auto;height:auto;max-width:calc(var(--cw) - 10px);max-height:calc(var(--cw) - 10px);object-fit:contain}
@keyframes postal{from{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) - 18%)) rotate(calc(var(--r) + 10deg)) scale(1.12)}}
/* Postales más grandes */
.carrusel{width:74%}

/* postales a sangre */
.postal{padding:0;background:none}
.postal img{display:block;max-width:var(--cw);max-height:var(--cw)}

/* Fila de abajo (Otros trabajos): cuadritos un 70% más pequeños */
.works+.works .project-image{height:calc(var(--alto,520px) * .3)}
@media(min-width:601px){.works+.works .gallery .project{flex-basis:calc(var(--card) * .3)}.works+.works .gallery .project.activo{flex-basis:calc(var(--card) * .3 * 1.38)}}
@media(max-width:600px){.works+.works .gallery .project{flex-basis:calc(var(--card) * .3)}}

/* Móvil: las fotos llenan la pantalla hasta los botones de abajo */
@media(max-width:600px){.project-image{aspect-ratio:auto;height:calc(var(--alto,520px) - 84px - env(safe-area-inset-bottom,0px))}:root{--card:calc(100vw - 2 * var(--gutter) - 28px)}.gallery .project{flex:0 0 var(--card);width:var(--card)}.gallery{grid-auto-columns:var(--card)}}

/* Flechas de la galería: solo la flecha roja, sin círculo */
.fila-flecha,.fila-flecha:hover{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0;color:#9A0015!important;width:44px;height:44px;margin-top:-22px}
.fila-flecha svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.4;filter:drop-shadow(0 0 6px rgb(0 0 0 / 55%))}
@media(hover:none){.fila-flecha{width:44px;height:44px;margin-top:-22px}}
.site-header nav a.nav-instagram{display:inline-flex!important;align-items:center;justify-content:center;padding:8px;margin-right:4px;color:inherit;transition:color .2s}
.site-header nav a.nav-instagram:hover{color:#9A0015}
.site-header nav a.nav-instagram{width:38px;height:38px;padding:0;margin:0;border-radius:999px;background:rgb(255 255 255 / 72%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink)}
.site-header nav a.nav-instagram{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:10px;overflow:hidden;transition:transform .2s}
.site-header nav a.nav-instagram img{display:block;width:38px;height:38px}
.site-header nav a.nav-instagram:hover{transform:scale(1.06)}
.site-header nav a.nav-instagram{border-radius:50%}
.site-header nav a.nav-instagram img{border-radius:50%;filter:brightness(.82) saturate(.9)}
/* Instagram: botón flotante abajo a la derecha */
.instagram-flotante{position:fixed;z-index:50;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:53px;height:53px;border-radius:50%;overflow:hidden;box-shadow:0 4px 16px rgb(0 0 0 / 45%);transition:transform .2s}
.instagram-flotante img{display:block;width:53px;height:53px;border-radius:50%;filter:brightness(.82) saturate(.9)}
.instagram-flotante:hover{transform:scale(1.06)}
@media(max-width:600px){.instagram-flotante{right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.instagram-flotante{right:auto;left:max(48px,env(safe-area-inset-left,0px));bottom:calc(48px + env(safe-area-inset-bottom,0px));width:80px;height:80px;transition:transform .25s var(--ease,ease)}
.instagram-flotante img{width:80px;height:80px}
.instagram-flotante:hover{transform:scale(1.15)}
@media(max-width:600px){.instagram-flotante{left:24px;right:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
/* Instagram: abajo a la derecha, a ~3 cm; pequeño y crece al tamaño completo con el cursor */
.instagram-flotante{left:auto;right:calc(3cm + env(safe-area-inset-right,0px));bottom:calc(3cm + env(safe-area-inset-bottom,0px));transform:scale(.5);transform-origin:100% 100%}
.instagram-flotante:hover{transform:scale(1)}
@media(max-width:600px){.instagram-flotante{left:auto;right:24px;bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
/* Instagram: más esquinado y un 20% mayor (reposo 48px, cursor 96px) */
.instagram-flotante{right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:96px;height:96px}
.instagram-flotante img{width:96px;height:96px}
/* Móvil fiel al escritorio: el logo flota sobre las fotos y las fotos ocupan toda la altura */
@media(max-width:600px){
html:not(.pagina) main{padding-top:12px;padding-bottom:0}
.project-image{height:calc(var(--alto,520px) - 72px - env(safe-area-inset-bottom,0px))}
.instagram-flotante{left:auto;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:72px;height:72px}
.instagram-flotante img{width:72px;height:72px}
}
/* Instagram: logo de línea blanco, sin círculo; 1 cm a la izquierda y 0,5 cm arriba */
.instagram-flotante{right:calc(24px + 1cm + env(safe-area-inset-right,0px));bottom:calc(24px + .5cm + env(safe-area-inset-bottom,0px));border-radius:0;overflow:visible;box-shadow:none}
.instagram-flotante img{border-radius:0;filter:drop-shadow(0 1px 6px rgb(0 0 0 / 55%))}
@media(max-width:600px){.instagram-flotante{right:calc(16px + 1cm);bottom:calc(84px + .5cm + env(safe-area-inset-bottom,0px))}}
.instagram-flotante{bottom:calc(24px + env(safe-area-inset-bottom,0px));opacity:.9}
@media(max-width:600px){.instagram-flotante{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* ===== FEEDBACK DISEÑADOR (oct 2026) — para deshacer, borrar desde aquí hasta el final ===== */
/* Carga: fondo blanco, solo el logo y una barra fina abajo */
#loader{background:#0b0b0b}
.loader-pie{color:#f4f2ee;display:flex!important;opacity:1!important;visibility:visible!important}
.loader-pie>span:first-child{visibility:hidden}
.loader-cuenta{color:#c8243a!important;margin-bottom:12px}
.loader-barra{height:10px!important;background:#c8243a}
/* Cabecera más sencilla: el lema deja de parecer un enlace */
.lema{font:400 13.2px/1.3 var(--sans);letter-spacing:.18em;opacity:.75;top:30px}
/* Sin puntero de la B: cursor normal */
/* Puntero: vuelve la B roja de Bodonia */
/* Flechas más visibles */
.fila-flecha svg{stroke-width:2.2;filter:drop-shadow(0 0 2px rgb(0 0 0 / 90%)) drop-shadow(0 0 10px rgb(0 0 0 / 70%))}
/* Tipografía: serif para titulares, sans para el resto */
.site-header nav button{font-family:var(--sans)!important;letter-spacing:.02em}
.text-dialog p,.text-dialog label,.text-dialog input,.text-dialog textarea,.text-dialog a,.text-dialog button,.text-dialog .antetitulo{font-family:var(--sans)!important}
.text-dialog h2,.text-dialog h2 *,.text-dialog .promise,.text-dialog .services dt,.text-dialog .services dd,.text-dialog #contact-email,.text-dialog #contact-phone{font-family:var(--serif)!important}
/* Ventanas: menos estilos a la vez, más aire y mismo tamaño */
.titular em{background:none!important;color:inherit!important;font-style:italic;padding:0}
.text-dialog .antetitulo{color:var(--muted)!important;font-size:13.2px;letter-spacing:.18em}
.text-dialog .promise{color:var(--ink)!important;font-size:clamp(24px,2.4vw,31.2px)}
.text-dialog .servicios-pie{color:var(--muted)!important;font-style:normal!important}
.text-dialog .services *:hover{color:inherit}
.text-dialog .gran35{display:none}
.text-dialog{width:min(1040px,calc(100vw - 48px))!important;min-height:min(640px,calc(100dvh - 48px))}
.text-dialog .dialog-content{padding:72px 80px 64px;display:flex;flex-direction:column;gap:22px}
.text-dialog .dialog-content>*{margin:0}
.boton-hablemos{align-self:flex-start;margin-top:12px!important;padding:12px 26px;border:0;border-radius:999px;background:#9A0015;color:#fff;font:500 16.8px/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:background .2s}
.boton-hablemos:hover{background:#7d0011}
/* Proyectos: subtítulo en sans, sin cursiva roja */
.project-dialog header p,.project-dialog header span:not(:first-child){font-family:var(--sans)!important;font-style:normal!important;color:#bdb9b1!important;font-size:15.6px;letter-spacing:.04em}
@media(max-width:600px){.text-dialog .dialog-content{padding:64px 24px 32px}}
.site-header .lema{font:400 13.2px/1.3 var(--sans)!important;letter-spacing:.18em!important;opacity:.75;top:30px!important}
.text-dialog .boton-hablemos{color:#fff!important;font-family:var(--sans)!important}
.text-dialog .dialog-content .promise{color:var(--ink)!important;margin:8px 0 0!important}
.text-dialog .dialog-content .antetitulo{font-size:13.2px!important;color:var(--muted)!important}
.text-dialog .dialog-content .servicios-pie{color:var(--muted)!important;font-family:var(--sans)!important}
.text-dialog label,.text-dialog label *,.text-dialog form p,.text-dialog form small,.text-dialog form span{font-family:var(--sans)!important}
.text-dialog form button[type=submit]{padding:12px 26px!important;border:0!important;border-radius:999px;background:#9A0015!important;color:#fff!important;font:500 16.8px/1 var(--sans)!important;text-decoration:none!important}
.text-dialog .close{border-radius:50%}
.text-dialog .dialog-content p.antetitulo{font-size:13.2px!important;letter-spacing:.18em!important}
/* Logo: «artes gráficas» alineado con la primera caja y algo más separado */
.intro .logo>span[aria-hidden]:last-of-type{margin-left:.74em;margin-top:.35em}
/* Puntero de la B un 30% más pequeño */
#cursor-b{width:29px}
/* ===== FIN FEEDBACK ===== */
/* Móvil: fotos a sangre en toda la pantalla; botones e Instagram flotando encima */
@media(max-width:600px){
html:not(.pagina) body{grid-template-rows:0 100dvh 0!important}
html:not(.pagina) main{padding:0!important;height:100dvh}
.site-header{position:fixed!important;left:0;right:0;bottom:0;z-index:40;background:none!important}
:root{--gutter:0px;--gap:8px;--card:calc(100vw - 72px)}
.gallery .project{flex:0 0 var(--card)!important;width:var(--card)!important}
.project-image{height:100dvh!important;border-radius:0!important}
.instagram-flotante{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
.intro{z-index:30}
}
@media(max-width:600px){.intro .brand{margin:14px 0 0 16px;display:inline-block}}

/* Escenas en vídeo, con el mismo tamaño que las fotos (3:4) */
.escena video{height:100%;width:auto;aspect-ratio:3/4;max-width:calc(100vw - 2 * var(--gutter));display:block;pointer-events:none;background:#1a1a1a}
@media(max-width:600px){.escena video{height:auto;width:calc(100vw - 2 * var(--gutter))}}
/* Territorios: vídeo real del libro en formato cuadrado */
.escena video[src*="territorios"]{aspect-ratio:1/1}
/* Mosaico de escenas (prueba en Primitivismo y Santa Fe): bloques de ángulos rectos */
.project-track.mosaico{align-items:stretch}
.mosaico .bloque{flex:0 0 auto;height:100%;display:grid;gap:var(--gap);scroll-snap-align:start;min-width:0}
.mosaico .bloque .escena{height:auto;min-height:0;min-width:0;overflow:hidden;display:block}
.mosaico .bloque .escena img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.mosaico .bloque.b1 .escena{height:100%}
.mosaico .bloque.b1 .escena img{width:auto;height:100%;object-fit:contain}
.mosaico .bloque.b2{grid-template-rows:1fr 1fr;aspect-ratio:3/8}
.mosaico .bloque.b3{grid-template-rows:repeat(3,1fr);aspect-ratio:1/4}
.project-track.mosaico.vertical{flex-direction:column;align-items:center;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;padding-bottom:var(--gutter)}
.vertical .bloque{height:auto;width:min(1100px,100%);flex:0 0 auto}
.vertical .bloque.fa{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:9/8}
.vertical .bloque.fa .escena:first-child{grid-row:span 2}
.vertical .bloque.fc{grid-template-columns:1fr 2fr;grid-template-rows:1fr 1fr;aspect-ratio:9/8}
.vertical .bloque.fc .escena:last-child{grid-row:1 / span 2;grid-column:2}
.vertical .bloque.fd{grid-template-columns:repeat(3,1fr);aspect-ratio:9/4}
.vertical .bloque.fv{display:flex;justify-content:center}
.vertical .bloque.fv .escena{width:66%}
.vertical .bloque.fv video{width:100%;height:auto}
.project-dialog.volando .mosaico .bloque:not(:first-child) .escena img{opacity:1}
.project-dialog.volando .mosaico .bloque:not(:first-child){animation:aparece-v .6s ease .55s both}
/* Móvil: mosaico cerrado, cada bloque ocupa todo el ancho; el vídeo va aparte y abajo, a ancho completo */
.vertical .bloque.v1{aspect-ratio:3/4}
.vertical .bloque.v2{grid-template-columns:1fr 1fr;aspect-ratio:3/2}
.vertical .bloque.fv .escena{width:100%}
/* Móvil: el icono de Instagram va a la derecha, en la misma fila que El taller · Qué hacemos · Hablemos */
@media(max-width:600px){
.site-header{padding-right:56px!important}
.instagram-flotante{right:12px!important;left:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;width:36px!important;height:36px!important;transform:none!important}
.instagram-flotante img{width:36px!important;height:36px!important}
}
/* Móvil: las ventanas de texto se ajustan a la pantalla, con margen alrededor (no la ocupan entera) */
@media(max-width:600px){
.text-dialog{width:calc(100vw - 40px)!important;min-height:0!important;max-height:calc(100dvh - 150px)!important;margin:auto;overflow-y:auto}
.text-dialog .dialog-content{padding:52px 20px 24px!important;gap:14px!important}
.text-dialog .dialog-content>h2{font-size:28.8px!important;margin-bottom:0!important}
.text-dialog .dialog-content>p{font-size:16.8px!important;line-height:1.55!important;margin:0!important}
.text-dialog .promise{font-size:21.6px!important}
.text-dialog .services>div{padding:12px 0!important;gap:4px!important}
.text-dialog .services dt{font-size:22.8px!important}
.text-dialog .services dd{font-size:15.6px!important;line-height:1.5!important}
.text-dialog .contact-grid{gap:18px!important}
.text-dialog form{gap:12px!important}
.text-dialog .close{top:8px;right:8px;width:38px;height:38px}
.text-dialog .antetitulo,.text-dialog .dialog-content p.antetitulo{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:calc(100% - 44px);line-height:1.5!important}
.text-dialog .services dt{font-size:20.4px!important}
.text-dialog .services>div{padding:8px 0!important}
}
/* Ordenador: ventanas de texto más pequeñas, con menos gris y el fondo de detrás más visible (misma letra) */
@media(min-width:601px){
.text-dialog{width:min(780px,calc(100vw - 48px))!important;min-height:0!important}
.text-dialog .dialog-content{padding:52px 56px 44px!important;gap:18px!important}
/* el título no se corta */
.text-dialog h2,.text-dialog .titular{white-space:normal!important;overflow:visible!important;text-wrap:balance;max-width:calc(100% - 48px)}
dialog::backdrop{background:rgb(0 0 0 / 22%)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* Móvil: cada foto de la portada ocupa toda la pantalla (sin hueco ni asomar la siguiente); el logo va encima */
@media(max-width:600px){
:root{--card:100vw;--gap:0px}
.gallery .project{flex:0 0 100vw!important;width:100vw!important}
.gallery{grid-auto-columns:100vw!important;gap:0!important;scroll-snap-type:x mandatory}
.gallery .project{scroll-snap-align:center}
}
/* Móvil: la foto llega hasta el borde superior (bajo la barra de estado); el logo baja lo justo para no taparse con ella */
:root{padding:0!important}
@media(max-width:600px){
html,body{background:#0b0b0b}
.intro{top:env(safe-area-inset-top,0px)!important}
}
/* Visor de trabajos (ordenador): la B de Bodonia como puntero y cada imagen crece un 30 % al pasar el ratón */
@media(hover:hover) and (pointer:fine) and (min-width:601px){
#project-dialog #cursor-b{z-index:60}
#project-dialog #project-track,#project-dialog #project-track .escena{cursor:none}
.project-track.mosaico{padding-block:7vh}
.mosaico .bloque{transition:width .45s cubic-bezier(.22,1,.36,1),grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.mosaico .bloque.crece{aspect-ratio:auto!important}
.mosaico .bloque.crece .escena img{width:100%!important;object-fit:cover!important}
.mosaico .escena img{transition:filter .35s ease}

}
/* Visor de trabajos: las imágenes ocupan toda la pantalla y el título del libro va superpuesto */
.project-dialog[open]{display:block!important;position:fixed}
.project-dialog #project-track{position:absolute;inset:0;height:100%;padding:0!important;gap:var(--gap)}
.project-dialog header{position:absolute;left:0;right:0;top:0;z-index:6;pointer-events:none;padding:22px 28px 56px!important;background:linear-gradient(rgb(0 0 0 / 62%),rgb(0 0 0 / 0%));text-shadow:0 1px 14px rgb(0 0 0 / 70%)}
.project-dialog header *{pointer-events:auto}
.project-dialog header h2,.project-dialog header #project-type{color:#f4f2ee}
.project-dialog footer{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:48px 24px 18px!important;background:linear-gradient(rgb(0 0 0 / 0%),rgb(0 0 0 / 55%));pointer-events:none}
.project-dialog footer button{pointer-events:auto}
@media(hover:hover) and (pointer:fine) and (min-width:601px){
.project-track.mosaico{padding-block:0!important}
}
@media(max-width:600px){
.project-dialog header{padding:14px 56px 44px 16px!important}
.project-dialog #project-track.vertical{padding-block:0!important}
}


/* Prueba: esquinas redondeadas en las imágenes */
.project-image,.mosaico .bloque .escena{border-radius:8px;overflow:hidden}
.mosaico .bloque .escena img{border-radius:inherit}
@media(max-width:600px){.gallery .project-image{border-radius:0}.mosaico .bloque .escena{border-radius:8px}}
/* Prueba: fondo blanco en portada y visor */
html,body,html:not(.pagina),html:not(.pagina) body,.project-dialog{background:#fff!important}

/* Sin "Libro" / "Catálogo" bajo los títulos */
#project-type,.project-caption>span{display:none!important}
/* Pantalla de carga en blanco */
#loader{background:#fff!important}
.loader-pie{color:#202020!important}

/* Portada del front en ordenador: las fotos llegan hasta el borde superior e inferior, sin franjas blancas */
@media(min-width:601px){
:root{--card:calc(100dvh * .8)!important}
html:not(.pagina) main{display:block!important;position:relative;height:100dvh}
html:not(.pagina) .works,html:not(.pagina) #proyectos{position:absolute!important;inset:0!important;margin:0!important;padding:0!important;align-self:auto!important}
html:not(.pagina) .gallery{height:100dvh!important;margin-inline:0!important;padding-block:0!important;align-items:stretch}
html:not(.pagina) .gallery .project,html:not(.pagina) .project-image{height:100dvh!important;max-height:none!important}
}

/* Primera imagen del visor ensanchada para que quepa el título: cubre todo el bloque */
.mosaico .bloque.portada-ancha{aspect-ratio:auto!important;flex:0 0 auto}
.mosaico .bloque.portada-ancha .escena{width:100%!important}
.mosaico .bloque.portada-ancha .escena img{width:100%!important;height:100%!important;object-fit:cover!important}

/* Móvil nativo: sin destello gris al tocar, sin retraso del toque, sin rebote de la página, botones sin texto seleccionable */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}
button,a,[role="button"],.project-image,.filters button{touch-action:manipulation}
button,[role="button"],.project-image,.filters button,.site-header nav a{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Respuesta inmediata al pulsar (solo transform) */
.site-header nav button,.site-header nav a,.filters button,.boton-hablemos,.gallery-controls button{transition:transform .16s cubic-bezier(.23,1,.32,1),color .2s ease,background-color .2s ease}
.site-header nav button:active,.site-header nav a:active,.filters button:active,.boton-hablemos:active,.gallery-controls button:active{transform:scale(.97)}
/* En pantallas táctiles el hover no se queda pegado tras tocar */
@media(hover:none){.instagram-flotante:hover,.site-header nav a.nav-instagram:hover{transform:none}.boton-hablemos:hover{background:inherit}}
@media(prefers-reduced-motion:reduce){.site-header nav button:active,.site-header nav a:active,.filters button:active,.boton-hablemos:active,.gallery-controls button:active{transform:none}}

/* Título del visor un 30 % más pequeño */
.project-dialog h2,#project-title{font-size:30px!important}
@media(max-width:600px){.project-dialog h2,#project-title{font-size:20.4px!important}}

/* Móvil: portada con un trozo de la siguiente foto a la vista; en el visor, marcos entre imágenes */
@media(max-width:600px){
:root{--card:calc(100vw - 56px);--gap:8px}
.gallery .project{flex:0 0 var(--card)!important;width:var(--card)!important}
.gallery{grid-auto-columns:var(--card)!important;gap:8px!important;scroll-snap-type:x mandatory;scroll-padding-left:0}
.gallery .project{scroll-snap-align:start}
.gallery .project-image{border-radius:8px}
.project-dialog{--gap:8px}
.project-dialog .mosaico .bloque .escena{border-radius:8px}
.project-dialog #project-track{padding:8px!important}
}
/* Móvil: con el texto más grande, los botones del menú siguen en una línea */
@media(max-width:600px){.site-header nav{gap:6px!important}.site-header nav button,.site-header nav a:not(.nav-instagram){white-space:nowrap;padding-inline:10px!important;font-size:14px!important}}

/* Pantalla de carga: las piezas del logo caen una a una con rebotes; la A cae recta y gira a su sitio. Dura 3 s; las que ya han caído siguen botando. */
#loader .pieza{animation:cae 1.2s both,bota .6s ease-in-out infinite alternate;animation-delay:calc(var(--i) * .25s),calc(var(--i) * .25s + 1.2s)}
#loader .pieza:last-child{animation:cae-a 1.2s both,gira .5s cubic-bezier(.34,1.8,.64,1) both;animation-delay:1.5s,2.5s}
@keyframes bota{from{translate:0 0}to{translate:0 -.07em}}
@keyframes cae{
  0%{translate:0 -120vh;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  45%{translate:0 0;animation-timing-function:cubic-bezier(0,.55,.45,1)}
  62%{translate:0 -.2em;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  76%{translate:0 0;animation-timing-function:cubic-bezier(0,.55,.45,1)}
  86%{translate:0 -.06em;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  94%,100%{translate:0 0}}
@keyframes cae-a{
  0%{translate:0 -120vh;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  70%{translate:0 0;animation-timing-function:cubic-bezier(0,.55,.45,1)}
  85%{translate:0 -.08em;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{translate:0 0}}
@keyframes gira{from{rotate:-45deg}to{rotate:0deg}}
@media(prefers-reduced-motion:reduce){#loader .pieza,#loader .pieza:last-child{animation:none}}

/* Visor de trabajos: X grande en rojo dentro de un círculo con degradado; título más pequeño y más aire en los bordes. */
.project-dialog .close{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0434f,#9A0015 70%);color:#fff!important;box-shadow:0 4px 14px rgb(0 0 0 / 35%)}
.project-dialog .close svg{width:26px;height:26px;stroke-width:2.2}
.project-dialog header{padding:34px 48px 56px!important}
.project-dialog h2,#project-title{font-size:23px!important}
@media(max-width:600px){.project-dialog header{padding:22px 24px 44px!important}.project-dialog h2,#project-title{font-size:16px!important}.project-dialog .close{width:44px;height:44px}}
/* Botón de la luna y versión oscura */
.site-header nav .modo-oscuro{display:grid;place-items:center;width:40px;height:40px;border-radius:50%}
.modo-oscuro svg{width:22px;height:22px;stroke-width:1.6}
html.oscuro,html.oscuro body,html.oscuro:not(.pagina),html.oscuro:not(.pagina) body,html.oscuro .project-dialog,html.oscuro #loader{background:#0b0b0b!important;color:#f4f2ee}
html.oscuro{--ink:#f4f2ee;--paper:#0b0b0b;--line:#333;--muted:#a9a6a0}
html.oscuro .modo-oscuro svg{fill:currentColor}
@media(hover:hover) and (pointer:fine){html.oscuro .site-header nav button:hover{background:#262626;color:#f4f2ee}}
/* Menú dos cuerpos más pequeño; luna centrada con fondo translúcido */
.site-header nav button{font-size:15px!important;padding:7px 14px!important;height:32px!important}
.site-header nav .modo-oscuro{padding:0!important;width:34px!important;height:34px!important;display:grid!important;place-items:center;background:rgb(255 255 255 / 55%)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.oscuro .site-header nav .modo-oscuro{background:rgb(0 0 0 / 45%)!important;color:#f4f2ee}
.modo-oscuro svg{width:18px;height:18px;margin:0;display:block}
/* Modales del taller y de qué hacemos: dos cuerpos más pequeños y todo dentro del recuadro */
.text-dialog,.text-dialog *{overflow-wrap:break-word}
.text-dialog .dialog-content{overflow:hidden}
.text-dialog .dialog-content *{max-width:100%;white-space:normal!important}
#about-dialog h2 span,#about-dialog h2 em{font-size:31px!important}
#about-dialog .dialog-content>p:not(.antetitulo):not(.promise){font-size:20px!important}
#about-dialog .promise{font-size:30px!important}
#services-dialog h2 span,#services-dialog h2 em{font-size:38px!important}
#services-dialog dt{font-size:30px!important}
#services-dialog .servicios-pie{font-size:21px!important}
.text-dialog .boton-hablemos{font-size:15px!important}
#services-dialog dt{font-family:var(--sans)!important;font-weight:300!important;font-style:normal!important;letter-spacing:0!important}
#services-dialog dt{font-size:24px!important}
.project-dialog .close{background:rgb(154 0 21 / 38%)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 10px rgb(0 0 0 / 15%)!important}
.project-dialog .close{width:38px!important;height:38px!important}
.project-dialog .close svg{width:16px!important;height:16px!important}
#about-dialog .promise{font-style:italic!important}
/* Propuesta móvil «ondas» */
#ondas{display:none}
@media(max-width:600px){
html.ondas body{overflow:hidden}
html.ondas main,html.ondas .site-header,html.ondas .instagram-flotante{display:none!important}
html.ondas #ondas{display:block;position:fixed;inset:0;height:100dvh;background:#fff;z-index:5}
#ondas svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#ondas .onda{cursor:pointer}
#ondas .onda-fondo{fill:#24201c}
#ondas .onda image{transition:transform .5s cubic-bezier(.22,1,.36,1)}
#ondas .onda:active image{transform:scale(1.03);transform-origin:center}
#ondas .onda-borde{fill:none;stroke:#fff;stroke-width:2.5;stroke-linejoin:round;pointer-events:none}
.ondas-logo{position:absolute;left:50%;transform:translate(-50%,-50%);pointer-events:none;--logo:30px;filter:drop-shadow(0 2px 10px rgb(0 0 0 / 35%))}
.ondas-logo .logo{font-size:var(--logo)}
.ondas-logo .logo>span[aria-hidden]:last-of-type{margin-left:.74em;margin-top:.35em;color:#d8344a!important}
.ondas-menu{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px max(12px,env(safe-area-inset-left,0px)) calc(14px + env(safe-area-inset-bottom,0px))}
.ondas-menu button,.ondas-menu a{display:grid;place-items:center;min-height:46px;padding:6px 4px;border-radius:999px;border:1px solid rgb(255 255 255 / 70%);background:rgb(20 18 16 / 72%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:500 13px/1.15 var(--sans);text-align:center;text-decoration:none}
}
.site-header nav .modo-oscuro,html.oscuro .site-header nav .modo-oscuro{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;color:#cfccc6!important;opacity:.9}
.modo-oscuro svg{stroke:#cfccc6;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 45%))}
#ondas .onda-tras{filter:url(#desenfoca) brightness(.8)}
@media(max-width:600px){
.ondas-menu{grid-template-columns:1fr 1fr 1fr 46px;align-items:center}
.ondas-menu .ondas-ig{width:46px;height:46px;min-height:0;padding:0;border-radius:50%}
.ondas-menu .ondas-ig img{width:24px;height:24px;display:block;filter:brightness(0) invert(1)}
}
/* Móvil: el contenido de El taller, Qué hacemos y Hablemos cabe entero dentro de su ventana, sin desplazarse. */
@media(max-width:600px){
html body .text-dialog{max-height:calc(100dvh - 24px)!important;height:fit-content!important}
html body .text-dialog .dialog-content{padding:26px 20px 22px!important;overflow:visible!important}
html body .text-dialog{overflow-y:auto!important}
html body .text-dialog .antetitulo{font-size:10.5px!important;line-height:1.35!important;margin:0 52px 8px 0!important;letter-spacing:.12em!important}
html body .text-dialog h2,html body .text-dialog h2 span,html body .text-dialog h2 em{font-size:24px!important;line-height:1.12!important}
html body .text-dialog h2{margin:0 0 12px!important}
html body #about-dialog .dialog-content>p:not(.antetitulo):not(.promise){font-size:14.5px!important;line-height:1.45!important;margin:0 0 12px!important}
html body #about-dialog .promise{font-size:18px!important;line-height:1.25!important;margin:4px 0 14px!important}
html body #services-dialog .services{display:grid!important;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:2px;margin:0 0 12px!important}
html body #services-dialog dt{font-size:16px!important;line-height:1.5!important;margin:0!important;padding:0!important}
html body #services-dialog dd{display:none!important}
html body #services-dialog .servicios-pie{font-size:15px!important;margin:0 0 12px!important}
html body .text-dialog .boton-hablemos{font-size:14px!important;padding:9px 18px!important;margin:0!important}
html body #contact-dialog .contact-grid{display:flex!important;flex-direction:column;gap:12px!important}
html body #contact-dialog .contact-details{display:grid!important;gap:3px!important}
html body #contact-dialog #contact-email,html body #contact-dialog #contact-phone{font-size:20px!important;line-height:1.2!important}
html body #contact-dialog .contact-details p,html body #contact-dialog .map-link,html body #contact-dialog .legal-links a{font-size:12.5px!important;line-height:1.35!important;margin:0!important}
html body #contact-dialog .legal-links{display:flex;gap:12px;margin-top:2px!important}
html body #contact-dialog form{display:grid!important;gap:7px!important}
html body #contact-dialog form label{font-size:12px!important;display:grid;gap:2px}
html body #contact-dialog form input,html body #contact-dialog form textarea{font-size:15px!important;padding:6px 10px!important;min-height:0!important}
html body #contact-dialog form input{height:34px!important}
html body #contact-dialog form textarea{height:58px!important;resize:none}
html body #contact-dialog form button{font-size:14px!important;margin:2px 0 0!important}
html body #contact-dialog form small{font-size:10.5px!important;line-height:1.3!important}
html body .text-dialog .marq{display:none!important}
}
@media(max-width:600px){html body #contact-dialog .dialog-content p.antetitulo{font-size:10.5px!important;letter-spacing:.12em!important}}
@media(max-width:600px) and (max-height:760px){
html body .text-dialog h2,html body .text-dialog h2 span,html body .text-dialog h2 em{font-size:21px!important}
html body #services-dialog dt{font-size:15px!important;line-height:1.32!important}
html body #about-dialog .dialog-content>p:not(.antetitulo):not(.promise){font-size:13.5px!important}
html body .text-dialog .dialog-content{padding:22px 18px 18px!important}
}

/* Formulario de contacto: envuelto en una línea roja fina */
html body #contact-dialog form{border:1px solid #9A0015;padding:18px 20px!important;border-radius:4px}

/* Botones de la cabecera sin círculo: texto gris como la luna; «Hablemos» en rojo */
.site-header nav button:not(.modo-oscuro){background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#cfccc6!important;text-shadow:0 1px 2px rgb(0 0 0 / 45%)}
.site-header nav button.contact-chip:not(.modo-oscuro){color:#d4182b!important;text-shadow:0 1px 2px rgb(0 0 0 / 35%)}
@media(hover:hover) and (pointer:fine){.site-header nav button:not(.modo-oscuro):hover,html.oscuro .site-header nav button:not(.modo-oscuro):hover{background:none!important;color:#fff!important}.site-header nav button.contact-chip:not(.modo-oscuro):hover{color:#ff3347!important}}

/* Móvil: los textos de la cabecera en columna a la izquierda, con la base del último a la altura de la base del Instagram; la luna, encima del Instagram */
@media(max-width:600px){
  .site-header{justify-content:flex-start!important;padding-left:max(18px,env(safe-area-inset-left,0px))!important;padding-right:84px!important;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
  .site-header nav{flex-direction:column!important;align-items:flex-start!important;gap:0!important}
  .site-header nav button:not(.modo-oscuro){padding:6px 0!important;height:auto!important;min-height:0!important;text-align:left;font-size:16px!important}
  .site-header nav .modo-oscuro{position:fixed!important;right:12px;bottom:calc(14px + 36px + 6px + env(safe-area-inset-bottom,0px));width:36px!important;height:36px!important;margin:0}
}

/* Flechas de las filas: gris sutil, más pequeñas y discretas */
@media(max-width:600px){.fila-flecha,.fila-flecha:hover{color:#9A0015!important;width:36px;height:36px;margin-top:-18px}
.fila-flecha svg{width:22px!important;height:22px!important;stroke-width:1.4!important;opacity:.75;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 45%))!important}
.fila-flecha:hover svg{opacity:1}
@media(hover:none){.fila-flecha{width:36px;height:36px;margin-top:-18px}}}
/* Móvil: el bloque de textos de la cabecera un poco más abajo */
@media(max-width:600px){.site-header nav{margin-bottom:-8px}}

/* Móvil: el logo sube a la esquina de arriba a la izquierda y se agranda un poco */
@media(max-width:600px){.intro .brand{margin:0!important;position:relative;top:-4px;left:12px}.intro .logo{font-size:23px!important}}

/* Luna en modo claro (pasa a oscuro); sol en modo oscuro (pasa a claro) */
.modo-oscuro .sol{display:none!important}
html.oscuro .modo-oscuro svg:not(.sol){display:none!important}
html.oscuro .modo-oscuro .sol{display:block!important;fill:none!important}

/* Sobre el logo también va la B roja en vez de la mano */
@media(hover:hover) and (pointer:fine){.intro .brand,.intro .brand *{cursor:none!important}}

/* Móvil: la X de los modales va solo en rojo, sin círculo ni fondo. */
@media(max-width:600px){.text-dialog .close,.project-dialog .close{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#9A0015!important}}

/* Hablemos: textos dos cuerpos más pequeños, legales abajo a la izquierda, nota del formulario mínima, borde 2 px. */
@media(min-width:601px){
#contact-dialog .antetitulo{font-size:16px!important}
#contact-dialog #contact-dialog-title{font-size:41.2px!important}
#contact-dialog .contact-details p,#contact-dialog .map-link{font-size:16px!important}
}
#contact-dialog .dialog-content{position:relative;padding-bottom:64px!important}
#contact-dialog .legal-links{position:absolute;left:var(--pad-modal,56px);bottom:22px;margin:0!important;gap:14px}
#contact-dialog .legal-links a{font-size:12px!important}
#contact-dialog #contact-form small{font-size:11px!important;line-height:1.4;margin-top:auto;padding-top:14px;opacity:.85}
html body #contact-dialog form{border-width:2px!important}
@media(max-width:600px){#contact-dialog .legal-links{left:24px;bottom:18px}#contact-dialog #contact-form small{font-size:9.5px!important}}

/* Menú de ordenador un poco más junto */
@media(min-width:601px){.site-header nav{gap:4px!important}.site-header nav button:not(.modo-oscuro){padding-inline:9px!important}}
/* Móvil: menú en columna más apretado */
@media(max-width:600px){.site-header nav button:not(.modo-oscuro){height:24px!important;padding-block:0!important;line-height:24px!important}}
/* De la idea al papel: botón Hablemos a la derecha */
#services-dialog .boton-hablemos{display:table!important;margin-left:auto!important;margin-right:0!important}
/* Nosotros: frase más arriba y 2 px menor; Hablemos a la derecha */
#about-dialog .promise{font-style:italic;margin-top:-14px!important}
@media(min-width:601px){#about-dialog .promise{font-size:28px!important}}
#about-dialog .boton-hablemos{display:table!important;margin-left:auto!important;margin-right:0!important}

/* Modales en móvil: ajuste fino */
@media(max-width:600px){
  .text-dialog .close:focus,.text-dialog .close:focus-visible{outline:none!important}
  .text-dialog .dialog-content{padding:28px 22px 26px!important}
  #about-dialog .promise{max-width:none!important;font-size:21px!important;margin-top:-6px!important}
  html body #services-dialog .services>div{padding:5px 0!important}
  #services-dialog .servicios-pie{margin-top:14px!important}
  #contact-dialog .legal-links{left:20px!important}
}

/* Modales: fundido breve de entrada y X algo mayor */
@keyframes modal-entra{from{opacity:0}to{opacity:1}}
.text-dialog[open]{animation:modal-entra .18s ease-out}
.text-dialog[open]::backdrop{animation:modal-entra .18s ease-out}
.text-dialog .close svg{width:26px!important;height:26px!important}
@media(max-width:600px){.text-dialog .close{width:44px!important;height:44px!important}.text-dialog .close svg{width:28px!important;height:28px!important}}

/* Flechas dentro del trabajo (solo ordenador) */
.escena-flecha{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;padding:0;border:0;background:none;color:#9A0015;cursor:pointer;transition:opacity .2s}
.escena-flecha svg{width:34px;height:34px;stroke:currentColor;stroke-width:2.2;filter:drop-shadow(0 0 2px rgb(0 0 0 / 90%)) drop-shadow(0 0 10px rgb(0 0 0 / 70%));transition:transform .2s ease}
.escena-flecha{opacity:0;transition:opacity .25s ease}
.project-dialog.moviendo .escena-flecha:not(:disabled),.escena-flecha:focus-visible{opacity:1}
.escena-flecha.atras{left:14px}.escena-flecha.atras svg{transform:rotate(180deg)}
.escena-flecha.adelante{right:14px}
.escena-flecha:disabled{opacity:0;pointer-events:none}
.escena-flecha:hover svg{transform:translateX(3px)}.escena-flecha.atras:hover svg{transform:rotate(180deg) translateX(3px)}
.project-dialog.volando .escena-flecha{opacity:0}
@media(max-width:600px){.escena-flecha{display:none}}

/* Ordenador: la B de Bodonia es el puntero en toda la página (logo, modales, flechas…); en los campos de texto vuelve el cursor normal */
@media(hover:hover) and (pointer:fine) and (min-width:601px){
html:not(.cargando) *,html:not(.cargando) *::before{cursor:none!important}
html:not(.cargando) input,html:not(.cargando) textarea,html:not(.cargando) select{cursor:text!important}
dialog #cursor-b{z-index:60}
}

#contact-email,#contact-dialog #contact-email{color:#9A0015!important}

/* Contacto: título, correo y teléfono con la tipografía del resto del texto */
#contact-dialog h2,#contact-dialog h2 *,#contact-dialog #contact-email,#contact-dialog #contact-phone{font-family:var(--sans)!important}
#contact-dialog h2{font-weight:500!important;letter-spacing:-.01em}

/* De la idea al papel: interlineado del título más cerrado */
#services-dialog h2.titular{line-height:.9!important}
#services-dialog h2.titular *{line-height:1.05!important}

/* Móvil, dentro de un trabajo: la X de cerrar sin recuadro y más grande */
@media(max-width:600px){
html body .project-dialog .close{width:52px!important;height:52px!important;outline:0!important;box-shadow:none!important;border:0!important;background:none!important;-webkit-tap-highlight-color:transparent}
html body .project-dialog .close:focus,html body .project-dialog .close:focus-visible,html body .project-dialog .close:active{outline:0!important;box-shadow:none!important;background:none!important}
html body .project-dialog .close svg{width:32px!important;height:32px!important;stroke-width:2!important}
}
@media(max-width:600px){
html body .project-dialog header{align-items:flex-start}
html body .project-dialog .close{margin-top:-17px!important;margin-right:-8px!important}
}
@media(max-width:600px){
html body .project-dialog .close{width:40px!important;height:40px!important;margin-top:-11px!important;margin-right:-9px!important}
html body .project-dialog .close svg{width:22px!important;height:22px!important}
}

/* Ordenador: degradado de arriba más suave */
@media(min-width:601px){
html:not(.pagina) body::before{background:linear-gradient(to bottom,rgb(11 11 11 / 45%) 0%,rgb(11 11 11 / 18%) 45%,rgb(11 11 11 / 0) 100%)!important}
}
/* Ordenador: portadas un 12 % más luminosas */
@media(min-width:601px){
.gallery .project-image .cover{filter:brightness(1.12)}
.gallery.con-activo .project:not(.activo) .cover{filter:brightness(1.04) saturate(.96)}
}
.escena-flecha{display:none!important}  /* flechas rojas dentro del trabajo retiradas: se desliza con el ratón en los bordes */

/* Versión oscura: los modales de texto también en oscuro */
html.oscuro .text-dialog{--paper:#171717;--ink:#f4f2ee;--muted:#b4b0a8;--line:#3a3a3a;--red:#e0485c;--rojo:#e0485c;background:#171717!important;color:#f4f2ee!important;border-color:#2c2c2c!important}
html.oscuro .text-dialog :is(p,h2,h2 *,dt,dd,li,label,address,a:not(.boton-hablemos),span):not(.servicios-pie):not(#contact-email){color:inherit}
html.oscuro .text-dialog .antetitulo,html.oscuro .text-dialog .muted{color:#b4b0a8!important}
html.oscuro .text-dialog input,html.oscuro .text-dialog textarea{background:transparent!important;color:#f4f2ee!important;border-color:#555!important}
html.oscuro #contact-dialog #contact-email,html.oscuro .text-dialog .servicios-pie,html.oscuro #about-dialog .promise{color:#e0485c!important}
html.oscuro body #services-dialog .servicios-pie{color:#e0485c!important}
/* Ordenador: imágenes dentro de los trabajos también un 12 % más luminosas */
@media(min-width:601px){#project-track img{filter:brightness(1.12)}}
/* Versión oscura: el fondo claro de cada tarjeta asomaba como un filo blanco en los bordes de las fotos */
html.oscuro .project-image,html.oscuro .project-image *:not(img){background-color:#0b0b0b!important}
@media(hover:hover) and (pointer:fine){.instagram-flotante:hover{transform:scale(.78125)!important}}  /* 96 px × .78 = 75 px con el ratón encima */