@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* =============================================================================
   NATURAL GARDENS · Paisajismo — sistema editorial alineado con Tinda's Project
   Revista de paisajismo: la fotografía marca el ritmo; Span de gran formato +
   Instrument Sans funcional; filetes finos, numeración editorial, composiciones
   asimétricas, mucho espacio negativo. Sin cards, sin sombras, sin redondeos.
   ============================================================================= */
@font-face{font-family:"Span";src:url("../fonts/span-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Span";src:url("../fonts/span-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#f6f3ee; --paper-2:#efeae2; --stone:#e4ddd1; --ink:#1b1916; --ink-2:#3a3530; --muted:#6b645b;
  --line:rgba(27,25,22,.18); --accent:#6b6f4c; /* oliva apagado: la nota de jardín sobre la paleta de Tinda's */
  --pad:clamp(20px,5vw,96px); --gap:clamp(16px,2.2vw,40px); --section:clamp(96px,12vw,200px);
  --ease:cubic-bezier(.22,.61,.36,1); --out:cubic-bezier(.16,1,.3,1);
  --span:"Span",Georgia,"Times New Roman",serif; --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:clip}
::selection{background:var(--stone);color:var(--ink)}
img{max-width:100%;display:block;color:transparent}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--span);font-weight:400;margin:0;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.wrap{width:100%;max-width:1720px;margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---------------------------------------------------------------- Tipografía editorial */
.kicker{display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,2vw,28px);font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.kicker .n{color:var(--ink);letter-spacing:.1em;display:inline-flex;align-items:center;gap:14px}
.kicker .n::after{content:"";width:clamp(28px,4vw,64px);height:1px;background:currentColor;opacity:.6}
.h2{font-size:clamp(34px,4.4vw,76px);line-height:1.02;letter-spacing:-.022em}
.h1{font-size:clamp(40px,6.4vw,116px);line-height:.96;letter-spacing:-.03em}
.dek{font-family:var(--span);font-size:clamp(19px,1.55vw,25px);line-height:1.45;color:var(--ink-2);margin:0;max-width:40ch;text-wrap:pretty}
.text{font-size:clamp(17px,1.25vw,19px);line-height:1.65;color:var(--ink-2);max-width:62ch}
.meta{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* «Leer más»: mayúsculas pequeñas, filete y flecha */
.more{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) left calc(100% - 10px)/100% 1px no-repeat;transition:background-size .6s var(--out)}
.more .ar{display:inline-block;transition:transform .6s var(--out)}
.more:hover,.more:focus-visible{background-size:0 1px;background-position:right calc(100% - 10px)}
.more:hover .ar,.more:focus-visible .ar{transform:translateX(8px)}
.more.light{color:var(--paper)}

/* Botón recto */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 34px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:0;overflow:hidden;isolation:isolate;cursor:pointer;text-decoration:none;transition:color .4s var(--ease),transform .2s var(--ease);white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--out)}
.btn:hover,.btn:focus-visible{color:var(--paper)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:active{transform:scale(.975)}
.btn.solid{color:var(--paper);background:var(--ink)}
.btn.solid::before{background:var(--ink-2)}
.btn.inv{color:var(--ink);background:var(--paper);border-color:var(--paper)}
.btn.inv::before{background:var(--stone)}
.btn.inv:hover{color:var(--ink)}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn svg{width:16px;height:16px}

/* ---------------------------------------------------------------- Cabecera */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--ink);z-index:70}
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;transition:background-color .4s var(--ease),box-shadow .4s var(--ease),color .3s}
.hdr .bar{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:84px;max-width:1720px;margin-inline:auto;padding-inline:var(--pad);transition:height .4s var(--ease)}
.hdr.solid,.no-cover .hdr{background:rgba(246,243,238,.9);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);box-shadow:0 1px 0 var(--line)}
.hdr.solid .bar{height:68px}
.logo{display:flex;flex-direction:column;text-decoration:none;margin-right:auto;line-height:1;transition:opacity .3s}
.logo:hover{opacity:.65}
.logo b{font-family:var(--span);font-weight:400;font-size:clamp(22px,2vw,28px);letter-spacing:-.01em}
.logo small{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.hlink{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;background:linear-gradient(currentColor,currentColor) left 100%/0 1px no-repeat;padding:6px 0;transition:background-size .45s var(--out)}
.hlink:hover,.hlink:focus-visible{background-size:100% 1px}
.lang{display:flex;gap:12px;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.lang a{text-decoration:none;color:var(--muted);transition:color .3s}
.lang a:hover,.lang a.on{color:var(--ink)}
.burger{display:inline-flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:inherit;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:10px 0;min-height:44px}
.burger i{position:relative;width:26px;height:9px;display:block}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .5s var(--out),top .5s var(--out)}
.burger i::before{top:0}.burger i::after{top:8px}
.burger:hover i::after{transform:scaleX(.6);transform-origin:right}
.menu-open .burger i::before{top:4px;transform:rotate(45deg)}
.menu-open .burger i::after{top:4px;transform:rotate(-45deg)}
/* Sobre la portada: cabecera transparente y en blanco */
.has-cover .hdr:not(.solid){color:#fff}
.has-cover .hdr:not(.solid)::before{content:"";position:absolute;inset:0 0 -60px;background:linear-gradient(rgba(14,12,10,.42),rgba(14,12,10,0));pointer-events:none;z-index:-1}
.has-cover .hdr:not(.solid) .logo small,.has-cover .hdr:not(.solid) .lang a{color:rgba(255,255,255,.82)}
.has-cover .hdr:not(.solid) .lang a.on{color:#fff}
.menu-open .hdr{background:var(--paper)!important;color:var(--ink)!important;box-shadow:none}
.menu-open .hdr::before{display:none}
.menu-open .hdr .logo small,.menu-open .hdr .lang a{color:var(--muted)!important}
.menu-open .hdr .lang a.on{color:var(--ink)!important}

/* Menú a pantalla completa: índice numerado */
.nav{position:fixed;inset:0;z-index:55;background:var(--paper);display:flex;align-items:center;padding:110px var(--pad) 40px;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s;overflow:auto}
.menu-open .nav{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.menu-open{overflow:hidden}
.nav ol{list-style:none;margin:0 auto;padding:0;width:100%;max-width:1180px;counter-reset:nav}
.nav li{counter-increment:nav;border-bottom:1px solid var(--line)}
.nav li:first-child{border-top:1px solid var(--line)}
.nav a{display:flex;align-items:baseline;gap:clamp(14px,2vw,32px);padding:clamp(6px,1.1vh,14px) 0;font-family:var(--span);font-size:clamp(34px,6vh,72px);line-height:1.05;letter-spacing:-.015em;text-decoration:none;color:var(--ink);transition:color .35s var(--ease),padding-left .5s var(--out)}
.nav a::before{content:counter(nav,decimal-leading-zero);font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--muted);min-width:28px;transform:translateY(-.6em)}
.nav ol:hover a{color:rgba(27,25,22,.32)}
.nav ol a:hover,.nav ol a:focus-visible{color:var(--ink);padding-left:12px}
.nav a[aria-current="page"]{font-style:italic}
.nav .cta a::after{content:"→";margin-left:auto;font-size:.55em;transition:transform .45s var(--out)}
.nav .cta a:hover::after{transform:translateX(10px)}
.menu-open .nav li{animation:rise .7s var(--out) both}
.menu-open .nav li:nth-child(2){animation-delay:.04s}.menu-open .nav li:nth-child(3){animation-delay:.08s}
.menu-open .nav li:nth-child(4){animation-delay:.12s}.menu-open .nav li:nth-child(5){animation-delay:.16s}.menu-open .nav li:nth-child(6){animation-delay:.2s}
.nav .sublist{display:flex;flex-wrap:wrap;gap:6px 22px;padding:0 0 18px clamp(42px,4vw,60px)}
.nav .sublist a{font-family:var(--sans);font-size:13px;letter-spacing:.04em;padding:4px 0;color:var(--muted)}
.nav .sublist a::before{display:none}
.nav .sublist a:hover{color:var(--ink);padding-left:0}
.nav ol:hover .sublist a{color:var(--muted)}
.nav-foot{display:none}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- Portada */
.cover{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1180px;overflow:hidden;color:#fff;isolation:isolate;background:var(--ink-2)}
.cover .media,.cover .media img{position:absolute;inset:0;width:100%;height:100%}
.cover .media img{object-fit:cover;object-position:50% 55%;animation:settle 2.4s var(--out) both}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,10,0) 45%,rgba(14,12,10,.55) 100%);z-index:0;pointer-events:none}
.cover .txt{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:clamp(36px,7vh,96px);max-width:1300px;animation:rise2 1.4s .25s var(--out) both}
.cover .issue{font-family:var(--sans);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;margin:0 0 18px;opacity:.9}
.cover .display{font-family:var(--span);font-size:clamp(52px,9.2vw,176px);line-height:.9;letter-spacing:-.035em;margin:0;text-shadow:0 2px 40px rgba(0,0,0,.18)}
.cover h1{font-family:var(--sans);font-size:clamp(13px,1.05vw,16px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;margin:clamp(18px,2.2vw,30px) 0 0}
.cover .credit{position:absolute;z-index:1;right:var(--pad);bottom:clamp(36px,7vh,96px);color:#fff;text-decoration:none;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-align:right;max-width:260px;line-height:1.6;opacity:.92;transition:opacity .3s}
.cover .credit span{display:block;letter-spacing:.22em;text-transform:uppercase;font-size:10.5px;opacity:.8}
.cover .credit:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.cover .scroll{position:absolute;z-index:1;left:50%;bottom:18px;width:44px;height:44px;translate:-50% 0;display:flex;justify-content:center}
.cover .scroll span{width:1px;height:36px;background:rgba(255,255,255,.7);transform-origin:top;animation:line 2.4s 1.6s var(--ease) infinite}
.cover .crumbs{position:absolute;z-index:2;top:clamp(96px,9vw,120px);left:0;right:0;max-width:1720px;margin-inline:auto;padding-inline:var(--pad);color:rgba(255,255,255,.88)}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
@keyframes rise2{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes line{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Entradilla */
.intro{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--gap) clamp(40px,8vw,160px);padding-block:clamp(72px,9vw,150px) clamp(64px,8vw,130px);align-items:end;border-bottom:1px solid var(--line)}
.intro .lead{font-family:var(--span);font-size:clamp(26px,2.9vw,50px);line-height:1.18;letter-spacing:-.012em;margin:0;text-wrap:pretty}
.intro aside{display:grid;justify-items:start;gap:6px}
.intro .phone{font-size:15px;letter-spacing:.04em;color:var(--ink-2);text-decoration:none;margin-top:14px}

/* Figura: la foto manda; zoom muy lento y leyenda discreta */
.fig{display:block;color:var(--ink);text-decoration:none}
.fig .m{display:block;overflow:hidden;background:var(--stone)}
.fig .m img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--out)}
.fig:hover .m img,.fig:focus-visible .m img{transform:scale(1.035)}
.fig .cap{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;margin-top:16px;align-items:baseline}
.fig .no{grid-row:span 2;font-size:11.5px;letter-spacing:.12em;color:var(--muted)}
.fig .tt{font-family:var(--span);font-size:clamp(20px,1.6vw,26px);line-height:1.15;justify-self:start;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .6s var(--out)}
.fig:hover .tt{background-size:100% 1px}

/* 01 · Destacado */
.feature{padding-top:var(--section)}
.feature .m{aspect-ratio:21/9}
.feature .caption{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(40px,6vw,120px);padding-top:clamp(28px,3vw,48px);align-items:start}
.feature .caption .kicker{grid-column:1/-1}
.feature .caption .dek{grid-column:2;grid-row:2}
.feature .caption .more{grid-column:2}

/* 02 · Pausa tipográfica */
.pause{padding-block:var(--section);display:grid;justify-items:center;text-align:center}
.pause .kicker{justify-content:center}
.pause blockquote{margin:0 0 clamp(28px,3vw,48px);max-width:1180px}
.pause blockquote p{font-family:var(--span);font-size:clamp(28px,3.6vw,64px);line-height:1.14;letter-spacing:-.018em;margin:0;text-wrap:balance}
.pause blockquote p::before{content:"“";display:block;font-size:1.9em;line-height:.6;color:var(--accent);margin-bottom:.15em}

/* 03 · Selección asimétrica */
.selection{padding-bottom:var(--section)}
.head{display:grid;margin-bottom:clamp(48px,6vw,110px);max-width:1100px}
.head .dek{margin-top:clamp(18px,2vw,28px)}
.mosaic{list-style:none;margin:0 0 clamp(48px,5vw,80px);padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(56px,7vw,120px)}
.mosaic .m{aspect-ratio:4/5}
.mosaic .wide .m{aspect-ratio:3/2}
.mosaic .i1{grid-column:1/9;grid-row:1}
.mosaic .i2{grid-column:10/13;grid-row:1;align-self:end}
.mosaic .i3{grid-column:2/6;grid-row:2}
.mosaic .i4{grid-column:7/11;grid-row:2;margin-top:clamp(60px,10vw,200px)}
.mosaic .i5{grid-column:5/13;grid-row:3}
.mosaic .i6{grid-column:1/4;grid-row:3;align-self:start;margin-top:clamp(40px,8vw,160px)}

/* 04 · Servicios: índice tipográfico */
.services{padding-block:var(--section);border-top:1px solid var(--line)}
.index{list-style:none;margin:0 0 clamp(56px,6vw,96px);padding:0;border-top:1px solid var(--ink)}
.index li{border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:70px minmax(0,6fr) minmax(0,5fr) 40px;gap:8px 32px;align-items:baseline;padding:clamp(18px,2vw,30px) 0;color:var(--ink);text-decoration:none;transition:padding .6s var(--out),color .3s}
.index .no{font-size:11.5px;letter-spacing:.12em;color:var(--muted)}
.index .nm{font-family:var(--span);font-size:clamp(30px,3.8vw,66px);line-height:1.02;letter-spacing:-.02em}
.index .ds{font-size:16px;line-height:1.5;color:var(--muted)}
.index .ar{font-size:22px;opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .6s var(--out)}
.index:hover a{color:rgba(27,25,22,.35)}
.index a:hover,.index a:focus-visible{color:var(--ink);padding-left:18px}
.index a:hover .ar{opacity:1;transform:none}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}

/* 05 · Estudio */
.person{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-block:var(--section);border-top:1px solid var(--line);align-items:center}
.person figure{grid-column:1/6;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--stone)}
.person figure img{width:100%;height:100%;object-fit:cover}
.person .t{grid-column:7/12}
.person blockquote{margin:clamp(32px,4vw,64px) 0;padding:0}
.person blockquote p{font-family:var(--span);font-size:clamp(24px,2.5vw,42px);line-height:1.2;letter-spacing:-.012em;margin:0}
.facts{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid var(--ink)}
.facts li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts li span:first-child{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}

/* Zonas */
.zones{padding-block:var(--section);border-top:1px solid var(--line)}
.zgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none}
.chips a{display:inline-block;border:1px solid var(--line);padding:10px 16px;font-size:13px;letter-spacing:.04em;text-decoration:none;transition:background .35s var(--ease),color .35s,border-color .35s}
.chips a:hover,.chips a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zlabel{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.map{width:100%;height:auto;display:block;border:1px solid var(--line)}
.map .pin{cursor:pointer}
.map .pin .dot{fill:var(--ink);transition:r .3s var(--out)}
.map .pin text{font-family:var(--sans);font-size:11px;fill:var(--ink);opacity:0;transition:opacity .3s}
.map .pin:hover .dot,.map .pin:focus .dot{r:7}
.map .pin:hover text,.map .pin:focus text,.map .hq text{opacity:1}
.map .hq .dot{fill:var(--accent)}
.map .ring{fill:none;stroke:var(--accent);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:ring 2.8s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* FAQ */
.faqs{padding-block:var(--section);border-top:1px solid var(--line)}
.faq{border-top:1px solid var(--ink);max-width:1100px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:70px 1fr 30px;align-items:baseline;gap:8px 32px;padding:clamp(18px,2vw,28px) 0;font-family:var(--span);font-size:clamp(22px,2vw,32px);line-height:1.2;transition:padding .6s var(--out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .no{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;color:var(--muted)}
.faq summary i{font-style:normal;font-family:var(--sans);font-size:22px;justify-self:end;transition:transform .5s var(--out)}
.faq summary:hover{padding-left:12px}
.faq details[open] summary i{transform:rotate(45deg)}
.faq .ans{overflow:hidden;padding:0 30px 0 102px}
.faq .ans p{margin:0;padding-bottom:28px;color:var(--ink-2);max-width:62ch}

/* Contacto: banda en negro cálido */
.contact{background:var(--ink);color:var(--paper);padding-block:var(--section)}
.contact .h2{color:var(--paper)}
.contact .kicker{color:rgba(246,243,238,.6)}
.contact .kicker .n{color:var(--paper)}
.contact .dek{color:rgba(246,243,238,.82);margin-top:28px}
.cgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,140px);align-items:start}
.direct{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:14px;font-size:14px;color:rgba(246,243,238,.7)}
.direct span{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,243,238,.5);margin-bottom:2px}
.direct a{color:var(--paper);text-decoration:none;font-family:var(--span);font-size:clamp(20px,1.6vw,26px);background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .5s var(--out)}
.direct a:hover{background-size:100% 1px}
form.cf{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.fld{position:relative;display:flex;flex-direction:column}
.fld.full{grid-column:1/-1}
.fld label{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,243,238,.62);margin-bottom:6px;transition:color .3s}
.fld:focus-within label{color:var(--paper)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:17px;color:var(--paper);background:transparent;border:0;border-bottom:1px solid rgba(246,243,238,.35);border-radius:0;padding:10px 0 12px;transition:border-color .3s,box-shadow .3s;width:100%}
.fld select option{color:var(--ink)}
.fld textarea{min-height:110px;resize:vertical}
.fld input:hover,.fld textarea:hover,.fld select:hover,.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-bottom-color:var(--paper);box-shadow:0 1px 0 var(--paper)}
.fld.err input,.fld.err textarea{border-bottom-color:#e2a28f;box-shadow:0 1px 0 #e2a28f}
.fld .msg{font-size:12.5px;color:#f0b6a6;margin-top:6px;min-height:0}
.chk{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(246,243,238,.82)}
.chk input{width:18px;height:18px;accent-color:var(--paper);margin-top:2px}
.chk a{color:var(--paper)}
.hp{position:absolute;left:-9999px}
.contact :focus-visible{outline-color:var(--paper)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140px);background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:16px 22px;z-index:95;max-width:min(520px,92vw);transition:transform .5s var(--out);font-size:15px}
.toast.show{transform:translate(-50%,0)}
.toast.bad{border-color:#9a3a2c;color:#9a3a2c}

/* ---------------------------------------------------------------- Páginas interiores */
.crumbs{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{text-decoration:none;opacity:.8}.crumbs a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.pagehead{padding-top:clamp(130px,14vw,200px);padding-bottom:clamp(48px,6vw,96px);display:grid;gap:clamp(20px,2.4vw,36px)}
.pagehead .h1{max-width:16ch}
.pagehead .dek{max-width:48ch}
.open{aspect-ratio:21/9;overflow:hidden;background:var(--stone)}
.open img{width:100%;height:100%;object-fit:cover}
.body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-block:clamp(64px,8vw,140px)}
.body aside{grid-column:1/4;align-self:start;position:sticky;top:110px}
.body .main{grid-column:5/12}
.body .main .text p:first-child::first-letter{float:left;font-family:var(--span);font-size:4.4em;line-height:.8;padding:.06em .1em 0 0;color:var(--ink)}
.list{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;border-top:1px solid var(--ink)}
.list li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;transition:padding .5s var(--out)}
.list li:hover{padding-left:10px}
.list li span{font-size:11.5px;letter-spacing:.12em;color:var(--muted);padding-top:4px}

/* Galería */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(20px,2.6vw,44px);grid-auto-flow:dense;padding-bottom:clamp(64px,8vw,140px)}
.g{margin:0;overflow:hidden;background:var(--stone);display:block}
.g img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform 1.8s var(--out)}
.g:hover img{transform:scale(1.02)}
.g.wide{grid-column:1/13;aspect-ratio:2/1}
.g.tall{aspect-ratio:4/5;grid-column:span 6}
.g.sq{aspect-ratio:1/1;grid-column:span 6}
.g.half{aspect-ratio:3/2;grid-column:span 6}
.gline{grid-column:2/12;font-family:var(--span);font-size:clamp(30px,3.6vw,60px);line-height:1.08;letter-spacing:-.02em;margin:clamp(48px,7vw,120px) 0;text-align:center;text-wrap:balance}

/* Listado de proyectos */
.plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(56px,7vw,130px)}
.plist .m{aspect-ratio:4/5}
.plist .wide .m{aspect-ratio:3/2}
.plist .p1{grid-column:1/9}
.plist .p2{grid-column:10/13;align-self:end}
.plist .p3{grid-column:3/8}
.filters{display:flex;flex-wrap:wrap;gap:6px 28px;border-top:1px solid var(--ink);padding-top:22px;margin-bottom:clamp(40px,5vw,72px)}
.filters button{font:inherit;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;background:none;border:0;padding:6px 0;cursor:pointer;color:var(--muted);background-image:linear-gradient(currentColor,currentColor);background-position:left 100%;background-size:0 1px;background-repeat:no-repeat;transition:color .3s,background-size .45s var(--out)}
.filters button:hover,.filters button[aria-pressed="true"]{color:var(--ink);background-size:100% 1px}
.gal{columns:3 300px;column-gap:var(--gap)}
.gal a{display:block;break-inside:avoid;margin-bottom:var(--gap);overflow:hidden;background:var(--stone)}
.gal a.hide{display:none}
.gal img{width:100%;transition:transform 1.8s var(--out)}
.gal a:hover img{transform:scale(1.03)}

/* Relacionados */
.related{padding-block:var(--section);border-top:1px solid var(--line)}
.rel{list-style:none;margin:0 0 clamp(40px,5vw,72px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.rel li:nth-child(2){margin-top:clamp(40px,6vw,120px)}
.rel .m{aspect-ratio:4/5}
.cta-line{padding-block:clamp(64px,8vw,130px);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-end}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(246,243,238,.97);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.lb.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.lb img{max-width:92vw;max-height:86vh;transform:scale(.97);transition:transform .6s var(--out)}
.lb.open img{transform:none}
.lb button{position:absolute;background:none;border:0;color:var(--ink);font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:14px;min-height:44px}
.lb .x{top:16px;right:var(--pad)}.lb .pv{left:var(--pad);top:50%}.lb .nx{right:var(--pad);top:50%}
.lb .ct{position:absolute;bottom:20px;left:50%;translate:-50% 0;font-size:11.5px;letter-spacing:.14em;color:var(--muted)}

/* Pie como colofón de revista */
.ftr{padding-top:clamp(64px,8vw,120px);border-top:1px solid var(--ink)}
.fcols{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:var(--gap)}
.ftr h4{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.ftr a{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .45s var(--out)}
.ftr a:hover{background-size:100% 1px}
.ftr .about{font-family:var(--span);font-size:clamp(20px,1.6vw,26px);line-height:1.3;max-width:28ch;margin:0}
.ftr .sister{margin-top:22px;font-size:14px;color:var(--muted)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(48px,6vw,96px);padding-block:22px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.colophon{font-family:var(--span);font-size:clamp(56px,13.5vw,260px);line-height:1;letter-spacing:-.045em;margin:clamp(48px,6vw,96px) 0 0;padding-inline:var(--pad);padding-bottom:.08em;white-space:nowrap;overflow:hidden;text-align:center}
.mcall{display:none}

/* Movimiento al hacer scroll */
.rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1.1s var(--out),transform 1.1s var(--out)}
.rv.in{opacity:1;transform:none}
.unveil{clip-path:inset(10% 0 0 0);opacity:.35;transform:translate3d(0,30px,0);transition:clip-path 1.4s var(--out),opacity 1.4s var(--out),transform 1.4s var(--out)}
.unveil.in{clip-path:inset(0 0 0 0);opacity:1;transform:none}

/* ---------------------------------------------------------------- Tablet */
@media (max-width:1100px){
  .intro,.feature .caption,.cgrid,.zgrid{grid-template-columns:1fr}
  .feature .caption .dek,.feature .caption .more{grid-column:1;grid-row:auto}
  .person figure{grid-column:1/6}.person .t{grid-column:7/13}
  .index a{grid-template-columns:52px 1fr}
  .index .ds{grid-column:2}.index .ar{display:none}
  .body aside{grid-column:1/13;position:static;margin-bottom:40px}
  .body .main{grid-column:1/13}
  .fcols{grid-template-columns:1fr 1fr}
  .hdr .hide-t{display:none}
}
/* ---------------------------------------------------------------- Móvil */
@media (max-width:767px){
  body{font-size:16px}
  .hdr .lang,.hdr .hlink{display:none}
  .menu-open .nav-foot{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
  .nav{align-items:flex-start}
  .cover{height:92svh;min-height:520px}
  .cover .display{font-size:clamp(46px,14vw,72px)}
  .cover .txt{bottom:84px}
  .cover .credit{left:var(--pad);right:auto;bottom:30px;text-align:left;max-width:70%;font-size:11.5px}
  .cover .scroll{left:auto;right:12px;translate:none;bottom:22px}
  .feature .m,.open{aspect-ratio:4/5}
  .mosaic{row-gap:52px}
  .mosaic li{grid-row:auto!important;margin-top:0!important;align-self:start!important}
  .mosaic .i1,.mosaic .i5{grid-column:1/13}
  .mosaic .i2,.mosaic .i4{grid-column:3/13}
  .mosaic .i3,.mosaic .i6{grid-column:1/11}
  .person{row-gap:36px}.person figure{grid-column:1/11}.person .t{grid-column:1/13}
  .faq summary{grid-template-columns:36px 1fr 24px;gap:8px 12px}
  .faq .ans{padding:0 0 0 48px}
  form.cf{grid-template-columns:1fr}
  .plist li{grid-column:1/13!important}
  .plist .p2{grid-column:3/13!important}
  .g.wide{aspect-ratio:4/3;margin-inline:calc(var(--pad)*-1)}
  .g.tall,.g.sq,.g.half{grid-column:1/13}
  .gline{grid-column:1/13;text-align:left}
  .rel{grid-template-columns:1fr}.rel li:nth-child(2){margin-top:0}
  .fcols{grid-template-columns:1fr}
  .index:hover a{color:var(--ink)}
  .list li:hover{padding-left:0}
  .mcall{display:flex;position:fixed;right:16px;bottom:16px;z-index:40;width:56px;height:56px;background:var(--ink);color:var(--paper);align-items:center;justify-content:center}
  .mcall svg{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.unveil{opacity:1;transform:none;clip-path:none}
}

/* ---------------------------------------------------------------- Trabajos: presentación visual (sin páginas de proyecto) */
.navin{width:100%;max-width:1180px;margin:auto}
.burger .bl{min-width:3.6em;text-align:right}
.work{padding-top:var(--section);border-top:1px solid var(--line)}
.filters+.work,.work:first-of-type{border-top:0}
.work.hide{display:none}
.whead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,2vw,28px) clamp(40px,6vw,120px);margin-bottom:clamp(48px,6vw,96px);align-items:start}
.whead .kicker{grid-column:1/-1;margin:0}
.whead .h1{grid-column:1}
.whead .dek{grid-column:1}
.whead .facts{grid-column:2;grid-row:2/4;margin:0}
.gallery a.g{cursor:zoom-in}
.g.solo{grid-column:4/10}
.list li b{font-weight:600}
.intro aside .kicker{margin-bottom:8px}
.filters{position:sticky;top:68px;z-index:20;background:var(--paper)}
.nav-foot .lang{display:flex}
@media (max-width:1100px){
  .whead{grid-template-columns:1fr}
  .whead .facts{grid-column:1;grid-row:auto}
}
@media (max-width:767px){
  .g.solo{grid-column:1/13}
  .burger .bl{min-width:0}
  .filters{gap:4px 20px}
}

/* Equipo (Nosotros) */
.team .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 0}
.team blockquote{margin:clamp(24px,3vw,44px) 0}
.team .text p{margin:0 0 1em;max-width:60ch}

/* Menú: imagen al pasar por Servicios */
.nav-pic{display:none}
@media (min-width:1024px) and (hover:hover){
  .navin{position:relative}
  .nav-pic{display:block;position:fixed;right:var(--pad);top:50%;width:min(28vw,400px);aspect-ratio:4/5;margin:0;overflow:hidden;background:var(--stone);opacity:0;transform:translateY(-46%);transition:opacity .45s var(--ease),transform .7s var(--out);pointer-events:none;z-index:2}
  .nav-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s var(--ease)}
  .nav-pic.on{opacity:1;transform:translateY(-50%)}
  .nav-pic.swap img{opacity:.35}
  .nav .sublist{max-width:calc(100% - min(28vw,400px) - 48px)}
}

/* Logotipo (árbol) arriba a la derecha */
.hmark{display:flex;align-items:center;margin-left:clamp(16px,2vw,28px);color:inherit;text-decoration:none;transition:opacity .3s}
.hmark:hover{opacity:.65}
.hmark .mark{width:clamp(22px,2vw,28px);height:clamp(22px,2vw,28px);display:block}
@media (max-width:640px){.hmark{margin-left:14px}.hmark .mark{width:20px;height:20px}}

/* Prensa (kiosco, línea Tinda's) */
.filters sup{font-size:9px;margin-left:3px;letter-spacing:0;vertical-align:super}
.kiosk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,5vw,80px) var(--gap)}
.kitem.hide{display:none}
.kcover{display:block;position:relative;text-decoration:none;color:inherit}
.kcover .mag{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--stone);box-shadow:0 1px 0 var(--line)}
.kcover .mag img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 1.1s var(--out)}
.kcover:hover .mag img{transform:scale(1.035)}
.kcover .mag.type{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2.4vw,36px);background:var(--stone);color:var(--ink)}
.kcover .mag.own{position:relative}
.kcover .mag.own b{position:absolute;left:0;right:0;bottom:0;padding:48px clamp(18px,2vw,28px) clamp(18px,2vw,26px);font-family:var(--span);font-weight:400;font-size:clamp(26px,2.4vw,38px);line-height:1;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.kcover .mag.type b{font-family:var(--span);font-weight:400;font-size:clamp(30px,3vw,46px);line-height:1;letter-spacing:-.01em}
.kcover .mag.type em{font-family:var(--span);font-size:clamp(17px,1.4vw,22px);line-height:1.25;font-style:italic;opacity:.85}
.kcta{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;background:var(--paper);color:var(--ink);transform:translateY(100%);opacity:0;transition:transform .5s var(--out),opacity .3s}
.kcover:hover .kcta,.kcover:focus-visible .kcta{transform:none;opacity:1}
.kcap{padding-top:18px;border-top:1px solid var(--line);margin-top:18px}
.kn{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.kt{font-family:var(--span);font-weight:400;font-size:clamp(24px,2vw,30px);line-height:1.05;margin:0}
.kt a{color:inherit;text-decoration:none}
.kt a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.kd{font-size:13px;color:var(--muted);margin:6px 0 0}
.kh{font-size:15px;line-height:1.45;margin:12px 0 0}
.kp{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:12px 0 0}
.kp a{color:inherit}
.kmore{margin:clamp(56px,6vw,96px) 0 clamp(64px,8vw,120px);color:var(--muted);font-size:14px}
@media (max-width:1023px){.kiosk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.kiosk{grid-template-columns:1fr}.kcta{transform:none;opacity:1;position:static;padding:10px 0 0;background:none}}

/* Blog */
.blist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,64px) var(--gap)}
.bcard a{display:block;text-decoration:none;color:inherit}
.bcard .bimg{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--stone)}
.bcard .bimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--out)}
.bcard a:hover .bimg img{transform:scale(1.035)}
.bcard .bmeta{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.bcard .btitle{display:block;font-family:var(--span);font-size:clamp(22px,1.8vw,28px);line-height:1.12}
.bcard .bdate{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.bhero{margin:0 auto clamp(40px,5vw,72px)}
.bhero img{width:100%;height:auto;max-height:80vh;object-fit:cover;display:block}
.post{padding-bottom:clamp(56px,7vw,110px)}
.post .text{margin:0 auto;max-width:68ch}
.post .text p{margin:0 0 1.1em}
.post .text h2,.post .text h3,.post .text h4{font-family:var(--span);font-weight:400;color:var(--ink);line-height:1.15;margin:1.6em 0 .6em}
.post .text h2{font-size:1.7em}.post .text h3{font-size:1.4em}.post .text h4{font-size:1.2em}
.post .text img{display:block;width:auto;max-width:100%;height:auto;margin:1.6em auto}
.post .text ul,.post .text ol{padding-left:1.2em;margin:0 0 1.1em}
.post .text a{color:var(--ink)}
.bmore{border-top:1px solid var(--line);padding-block:clamp(56px,7vw,110px)}
.bmore .h2{margin-bottom:clamp(32px,4vw,56px)}
.bmore .blist{margin-bottom:40px}
@media (max-width:1023px){.blist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.blist{grid-template-columns:1fr}}
.post .text .answer{font-size:1.08em;line-height:1.55;color:var(--ink);border-left:2px solid var(--ink);padding:4px 0 4px 18px;margin:0 0 1.8em}
.post .text .byline{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--line);font-size:.9em;color:var(--muted)}
.direct .hrs{display:block;font-style:normal;font-family:var(--span);font-size:clamp(17px,1.3vw,21px);color:var(--paper);line-height:1.3}
/* Zona táctil cómoda (44px) para el árbol del logo */
.hmark{padding:12px;margin:-12px -12px -12px clamp(4px,1vw,16px)}
/* Accesibilidad táctil y legibilidad */
.lang{gap:4px}
.lang a{display:inline-block;padding:10px 6px}
.meta{font-size:13px}

/* "Qué hacemos": foto del servicio en una columna a la derecha (solo escritorio) */
.ipic{display:none}
@media (min-width:1024px) and (hover:hover){
  .ixwrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,24vw,380px);column-gap:clamp(32px,4vw,72px);align-items:start}
  .ixwrap .index .nm{font-size:clamp(28px,3vw,52px)}
  .ipic{display:block;position:sticky;top:110px;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
  .ipic img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s var(--ease)}
  .ipic.swap img{opacity:.25}
}