/* ESENCIA · páginas interiores (servicios, zonas, casos y guías).
   Mismo sistema que la portada (ver DESIGN.md): crema para explicar y demostrar, oliva para hablar.
   Las páginas se generan con _scripts/web_paginas.py. */
@font-face{font-family:"Young Serif";src:url(../fonts/young-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}

:root{
  --noche:#121211;--tinta:#1D1D1B;--crema:#FFF6EA;--oliva:#60634F;--miel:#E2A63B;
  --c88:rgba(255,246,234,.88);--c72:rgba(255,246,234,.74);
  --t72:rgba(29,29,27,.76);--t58:rgba(29,29,27,.64);--t14:rgba(29,29,27,.14);
  --ff-d:"Young Serif",Georgia,"Times New Roman",serif;
  --ff-t:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --head:60px;--g:max(20px,env(safe-area-inset-left));--wrap:1240px;
  color-scheme:light;accent-color:var(--oliva);caret-color:var(--oliva);
  scrollbar-color:#cbc3b3 var(--crema);
}
@media (min-width:900px){:root{--head:68px;--g:max(40px,4vw)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 24px)}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 17px/1.55 var(--ff-t);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
::selection{background:var(--oliva);color:var(--crema)}
[data-tone=oliva] ::selection{background:var(--miel);color:var(--tinta)}
:focus-visible{outline:2px solid var(--oliva);outline-offset:3px;border-radius:8px}
[data-tone=oliva] :focus-visible{outline-color:var(--miel)}
img,svg{display:block;max-width:100%}
.i{width:1.15em;height:1.15em;fill:currentColor;flex:none}
h1,h2,h3,h4{margin:0;font-family:var(--ff-d);font-weight:400;letter-spacing:-.018em;line-height:1.06;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-64px;z-index:100;background:var(--tinta);color:var(--crema);padding:12px 16px;border-radius:12px;font-weight:600;text-decoration:none;transition:top 160ms var(--ease-out)}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}
[data-tone=oliva]{background:var(--oliva);color:var(--crema);color-scheme:dark}

/* buttons: one pill family, tinta on crema, crema on oliva */
.btn{--bg:var(--tinta);--fg:var(--crema);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px 0 20px;border:0;border-radius:999px;background:var(--bg);color:var(--fg);font:600 16px/1.1 var(--ff-t);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px -14px rgba(0,0,0,.6);transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease}
.btn .i{width:22px;height:22px}
.btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.btn:hover{--bg:var(--oliva)}}
.btn.sm{min-height:44px;padding:0 18px 0 14px;font-size:14.5px;gap:8px}
.btn.sm .i{width:19px;height:19px}
[data-tone=oliva] .btn{--bg:var(--crema);--fg:var(--tinta)}
@media (hover:hover) and (pointer:fine){[data-tone=oliva] .btn:hover{--bg:var(--miel);--fg:var(--tinta)}}

/* text link with an arrow */
.enlace{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;text-decoration:none;color:var(--tinta)}
.enlace .i{width:18px;height:18px;color:var(--oliva);transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.enlace:hover{text-decoration:underline;text-decoration-color:var(--oliva)}.enlace:hover .i{transform:translateX(3px)}}

/* header: crema by default, oliva over the closing sections */
.head{position:fixed;inset:0 0 auto;z-index:50;height:calc(var(--head) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--g) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(255,246,234,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--tinta);box-shadow:0 1px 0 var(--t14);transition:background-color 300ms ease,color 300ms ease,box-shadow 300ms ease}
.head .logo{display:flex;align-items:center;min-height:44px;margin-left:-2px}
.head .logo img{height:24px;width:auto}
.head .logo .lc{display:none}
.head nav{display:flex;align-items:center;gap:4px}
.head nav a.l{font:500 15px/1 var(--ff-t);text-decoration:none;padding:13px 12px;border-radius:10px;color:var(--t72);transition:color 160ms ease}
.head nav a.l.on{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--oliva);text-decoration-thickness:2px;text-underline-offset:.5em}
@media (hover:hover) and (pointer:fine){.head nav a.l:hover{color:var(--tinta)}}
.head nav .btn{margin-left:10px}
.head[data-tone=oliva]{background:rgba(96,99,79,.94);color:var(--crema);box-shadow:0 1px 0 rgba(255,246,234,.14)}
.head[data-tone=oliva] .logo .lc{display:block}
.head[data-tone=oliva] .logo .lt{display:none}
.head[data-tone=oliva] nav a.l{color:var(--c88)}
.head[data-tone=oliva] nav a.l.on{color:var(--crema);text-decoration-color:var(--miel)}
.head[data-tone=oliva] .btn{--bg:var(--crema);--fg:var(--tinta)}
@media (hover:hover) and (pointer:fine){.head[data-tone=oliva] .btn:hover{--bg:var(--miel)}.head[data-tone=oliva] nav a.l:hover{color:var(--crema)}}
@media (max-width:899px){.head nav a.l{display:none}}
@media (max-width:359px){.head .btn .t{display:none}.head .btn.sm{padding:0 13px}}

/* mobile menu: a disclosure in the header below 900 px; the icons swap with scale, opacity and blur */
.menu{display:none}
.menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 160ms ease}
.menu summary::-webkit-details-marker{display:none}
.menu summary .i{grid-area:1/1;width:24px;height:24px;transition:opacity 200ms cubic-bezier(.2,0,0,1),transform 200ms cubic-bezier(.2,0,0,1),filter 200ms cubic-bezier(.2,0,0,1)}
.menu summary .i-x,.menu[open] summary .i-l{opacity:0;transform:scale(.25);filter:blur(4px)}
.menu[open] summary .i-x{opacity:1;transform:none;filter:none}
.menu[open] summary{background:rgba(29,29,27,.07)}
.head .menu-p{display:grid;gap:0;align-items:stretch}
.menu-p{position:fixed;left:0;right:0;top:calc(var(--head) + env(safe-area-inset-top));display:grid;padding:4px var(--g) 20px;background:var(--crema);color:var(--tinta);box-shadow:0 1px 0 var(--t14),0 30px 60px -24px rgba(0,0,0,.35)}
.menu-p a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;font:400 23px/1.2 var(--ff-d);text-decoration:none;box-shadow:inset 0 -1px 0 var(--t14)}
.menu-p a .i{width:20px;height:20px;color:var(--oliva)}
.menu-p a[aria-current]{color:var(--oliva)}
.head[data-tone=oliva] .menu[open] summary{background:rgba(255,246,234,.14)}
.head[data-tone=oliva] .menu-p{background:var(--oliva);color:var(--crema);box-shadow:0 1px 0 rgba(255,246,234,.14),0 30px 60px -24px rgba(0,0,0,.45)}
.head[data-tone=oliva] .menu-p a{box-shadow:inset 0 -1px 0 rgba(255,246,234,.18)}
.head[data-tone=oliva] .menu-p a .i,.head[data-tone=oliva] .menu-p a[aria-current]{color:var(--miel)}
@media (max-width:899px){.menu{display:block}}
@media (max-width:440px){.head .btn .t{display:none}.head .btn.sm{padding:0 13px}}
@media (prefers-reduced-motion:reduce){.menu summary .i{transition:none}}

/* breadcrumbs */
.migas{padding-top:calc(var(--head) + env(safe-area-inset-top) + clamp(12px,2vw,24px))}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;font:500 14px/1.4 var(--ff-t);color:var(--t58)}
.migas li{display:flex;align-items:center;min-height:44px}
.migas li+li::before{content:"/";margin:0 10px;color:rgba(29,29,27,.3)}
.migas a{color:var(--t72);text-decoration:none}
@media (hover:hover) and (pointer:fine){.migas a:hover{color:var(--tinta);text-decoration:underline}}

/* first viewport: promise and action on the left, a real photo on the right */
.p-hero{padding:clamp(16px,2.6vw,36px) 0 clamp(72px,9vw,128px)}
.p-hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,104px);align-items:center}
.p-hero h1{font-size:clamp(42px,4.3vw,68px);line-height:1}
.p-hero.caso-h h1{font-size:clamp(34px,3.6vw,52px);line-height:1.06}
.p-hero .lead{margin-top:26px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--t72);max-width:44ch}
.acts{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.prueba{margin-top:clamp(40px,4.5vw,64px);padding-top:20px;box-shadow:inset 0 1px 0 var(--t14);max-width:46ch}
.prueba b{display:block;font:400 clamp(22px,2vw,28px)/1.18 var(--ff-d);letter-spacing:-.01em;font-variant-numeric:lining-nums}
.prueba span{display:block;margin-top:6px;font-size:15px;color:var(--t72)}
.prueba a{color:var(--tinta);font-weight:600;text-decoration-color:var(--oliva);white-space:nowrap}
.foto{margin:0;border-radius:20px;overflow:hidden;background:#e9e1d2;outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
.foto img{width:100%;height:100%;object-fit:cover}
.p-hero .foto{aspect-ratio:4/5}
/* the home's code-drawn phone, as an object on the table */
.movil{position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.movil figcaption{position:absolute;left:0;right:0;bottom:4%;font:500 13.5px/1.3 var(--ff-t);color:var(--t58);text-align:center}
.movil img{width:auto;height:auto;max-width:100%;max-height:min(700px,80svh)}
@media (max-width:899px){.movil img{width:min(72%,320px);max-height:none}}
.p-hero.texto{padding-bottom:clamp(40px,5vw,72px)}
.p-hero.texto .wrap{grid-template-columns:minmax(0,1fr)}
.p-hero.texto h1{max-width:18ch}
.p-hero.texto .lead{max-width:56ch}
@media (max-width:899px){.p-hero .wrap{grid-template-columns:minmax(0,1fr)}.p-hero .foto{width:100%;max-width:520px}}

/* sections on crema */
.sec{padding:clamp(80px,9vw,136px) 0;box-shadow:inset 0 1px 0 var(--t14)}
.sec h2{font-size:clamp(36px,4.2vw,62px);line-height:1.02}
.intro{margin-top:20px;font-size:clamp(17px,1.4vw,20px);color:var(--t72);max-width:44ch}
.dos{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,112px);align-items:start}
.dos>.tit{position:sticky;top:calc(var(--head) + 40px)}
@media (max-width:899px){.dos{grid-template-columns:minmax(0,1fr)}.dos>.tit{position:static}}

/* the diner's moment: Young Serif tells it, Instrument Sans explains it */
.momento .cols{margin-top:clamp(36px,4.5vw,64px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,104px);align-items:start}
.relato{font:400 clamp(24px,2.5vw,36px)/1.24 var(--ff-d);letter-spacing:-.012em}
.expl{display:grid;gap:16px;font-size:18px;color:var(--t72);max-width:56ch}
.expl a,.lista a,.fila-t a{color:var(--tinta);font-weight:600;text-decoration-color:var(--oliva)}
@media (max-width:899px){.momento .cols{grid-template-columns:minmax(0,1fr)}}

/* rows separated by hairlines, never cards */
.lista{list-style:none;margin:0;padding:0}
.lista li{padding:26px 0 28px;box-shadow:inset 0 1px 0 var(--t14)}
.lista li:last-child{box-shadow:inset 0 1px 0 var(--t14),inset 0 -1px 0 var(--t14)}
.lista h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
.lista p{margin-top:8px;color:var(--t72);max-width:56ch}
.lista .enlace{margin-top:6px}

/* what the owner gains */
.ganas{margin-top:clamp(32px,3.5vw,48px)}
.lab{font:600 13.5px/1.3 var(--ff-t);color:var(--oliva)}
.ganas ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;max-width:40ch}
.ganas li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font:600 18px/1.4 var(--ff-t)}
.ganas .i{width:20px;height:20px;color:var(--oliva);margin-top:3px}

/* real cases: same blocks as the home page */
.caso{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start;margin-top:clamp(40px,5vw,72px)}
.caso>.foto{position:sticky;top:calc(var(--head) + 24px);aspect-ratio:4/5}
.caso h3{font-size:clamp(34px,3.6vw,52px)}
.meta2{margin-top:12px;color:var(--t72);font-size:15.5px;max-width:52ch}
.hist{margin-top:20px;font-size:17.5px;max-width:56ch}
.dato{margin-top:36px;padding-top:26px;box-shadow:inset 0 1px 0 var(--t14)}
.dos>.datos>.dato:first-child{margin-top:0;padding-top:0;box-shadow:none}
.dato h3,.dato h4{font:400 clamp(22px,2vw,28px)/1.2 var(--ff-d);letter-spacing:-.01em;text-wrap:balance}
.cmp{width:100%;margin-top:14px;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
.cmp th,.cmp td{padding:11px 0 11px 14px;text-align:right;font-weight:400;white-space:nowrap}
.cmp thead th{font:600 13px/1.2 var(--ff-t);color:var(--t58);padding-top:0}
.cmp tbody tr{box-shadow:inset 0 1px 0 var(--t14)}
.cmp tbody th{padding-left:0;text-align:left;white-space:normal;font:400 15px/1.35 var(--ff-t);color:var(--t72)}
.cmp tbody td{font:400 clamp(19px,1.6vw,23px)/1 var(--ff-d)}
.cmp tbody td:nth-of-type(1){color:var(--t58)}
.cmp tbody td:nth-of-type(3){color:var(--oliva)}
.cmp.una tbody td{color:var(--tinta)}
.cmp tr.total th{color:var(--tinta);font-weight:600}
.cmp tr.total td{color:var(--oliva)}
.nota{margin-top:12px;font-size:16.5px;max-width:52ch}
.fuente{margin-top:28px;font-size:13.5px;color:var(--t58);max-width:62ch}
.dato .fuente{margin-top:8px}
.meses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:16px}
.meses b{display:block;font:400 18px/1.2 var(--ff-d)}
.meses small{display:block;margin-top:4px;font-size:13px;color:var(--t58)}
.meses p{display:grid;gap:3px;margin-top:14px}
.meses p span:first-child{font:400 24px/1 var(--ff-d);color:var(--oliva);font-variant-numeric:lining-nums}
.meses p span:last-child{font-size:14.5px;line-height:1.35;color:var(--t72)}
.grande{margin-top:10px;font:400 clamp(48px,5vw,76px)/1 var(--ff-d);letter-spacing:-.02em;color:var(--oliva);font-variant-numeric:lining-nums}
.cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:6px}
.cifras small{display:block;margin-top:8px;font-size:14.5px;color:var(--t72)}
.cita{margin:40px 0 0;max-width:40ch}
.cita p{font:400 clamp(21px,1.9vw,27px)/1.28 var(--ff-d)}
.cita .por{margin-top:12px;font:400 15px/1.4 var(--ff-t);color:var(--t72)}
.caso .enlace,.datos+.enlace{margin-top:24px}
@media (max-width:820px){.caso{grid-template-columns:minmax(0,1fr)}.caso>.foto{position:static;width:100%;max-width:440px}}
@media (max-width:560px){.meses{grid-template-columns:minmax(0,1fr);gap:22px}.cifras{grid-template-columns:minmax(0,1fr)}.cmp th,.cmp td{padding-left:10px}.cmp tbody th{font-size:14px}.cmp tbody td{font-size:18px}}
@media (max-width:400px){.cmp thead th{white-space:normal;vertical-align:bottom}.cmp th,.cmp td{padding-left:8px}}

/* case gallery: one big photo and two small ones */
.galeria{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:6/5}
.galeria figure{margin:0;border-radius:20px;overflow:hidden;background:#e9e1d2;outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
.galeria .g1{grid-row:1/3}
.galeria img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.galeria{display:flex;aspect-ratio:auto;margin:0 calc(-1 * var(--g));padding:0 var(--g);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--g);scrollbar-width:none}.galeria::-webkit-scrollbar{display:none}.galeria figure{flex:0 0 76%;max-width:420px;aspect-ratio:4/5;scroll-snap-align:start}}

/* strip of real dishes */
.tira{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tira .foto{aspect-ratio:4/5}
@media (max-width:820px){.tira{display:flex;margin:32px calc(-1 * var(--g)) 0;padding:0 var(--g);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--g);scrollbar-width:none}.tira::-webkit-scrollbar{display:none}.tira .foto{flex:0 0 70%;max-width:340px;scroll-snap-align:start}}

/* steps on a line with dots */
.steps{list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.steps li{position:relative;padding:36px 32px 0 0}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--t14)}
.steps li::after{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--oliva);box-shadow:0 0 0 5px var(--crema)}
.steps h3{font-size:clamp(23px,2vw,28px)}
.steps p{margin-top:12px;color:var(--t72);font-size:16px;max-width:30ch}
@media (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr);gap:34px}
  .steps li{padding:0 0 0 36px}
  .steps li::before{left:5px;right:auto;top:8px;bottom:-40px;width:1px;height:auto}
  .steps li:last-child::before{display:none}
  .steps li::after{top:4px}
}
.inc{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;max-width:760px}
.inc li{display:flex;gap:12px;align-items:center;font-size:17px}
.inc .i{width:22px;height:22px;color:var(--oliva)}
.incluido{margin-top:clamp(56px,7vw,96px);padding-top:clamp(36px,4vw,52px);box-shadow:inset 0 1px 0 var(--t14)}
.incluido h3{font-size:clamp(24px,2.2vw,30px)}
@media (max-width:560px){.inc{grid-template-columns:minmax(0,1fr)}}

/* questions */
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq details{box-shadow:inset 0 -1px 0 var(--t14)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;min-height:44px;font:400 clamp(19px,1.6vw,23px)/1.3 var(--ff-d);-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{width:22px;height:22px;color:var(--oliva);transition:transform 220ms var(--ease-out)}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--t72);font-size:17px;max-width:60ch}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height 260ms var(--ease-out),content-visibility 260ms allow-discrete}
  .faq details[open]::details-content{height:auto}
}
@media (max-width:820px){.faq .wrap{grid-template-columns:minmax(0,1fr)}}

/* who we are for, and who we are not for */
.encaje{margin-top:clamp(36px,4.5vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,104px)}
.encaje h3{font-size:clamp(22px,2vw,28px)}
.marcas{list-style:none;margin:18px 0 0;padding:0}
.marcas li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:16px 0;box-shadow:inset 0 1px 0 var(--t14);font-size:17.5px;line-height:1.45}
.marcas .i{width:20px;height:20px;color:var(--oliva);margin-top:3px}
.marcas.no .i{color:var(--t58)}
@media (max-width:820px){.encaje{grid-template-columns:minmax(0,1fr)}}

/* the agency in facts, one line each, for whoever compares */
.ficha{margin:0;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.ficha dt,.ficha dd{margin:0;padding:16px 0;box-shadow:inset 0 1px 0 var(--t14)}
.ficha dt{padding-right:24px;font:600 15px/1.45 var(--ff-t);color:var(--t72)}
.ficha dd{font-size:17px;line-height:1.5}
@media (max-width:560px){.ficha{grid-template-columns:minmax(0,1fr)}.ficha dd{padding-top:0;box-shadow:none}}

/* links to related pages */
.otros{list-style:none;margin:clamp(28px,3.5vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}
.otros li{box-shadow:inset 0 1px 0 var(--t14)}
.otros a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:16px 0;text-decoration:none;font:400 clamp(19px,1.6vw,23px)/1.25 var(--ff-d)}
.otros .i{width:20px;height:20px;color:var(--oliva);transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.otros a:hover .i{transform:translateX(4px)}.otros a:hover span{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--oliva);text-underline-offset:.18em}}
@media (max-width:900px){.otros{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.otros{grid-template-columns:minmax(0,1fr)}}

/* services index: grouped by the diner's moment */
.grupos,.listado{padding-bottom:clamp(80px,9vw,136px)}
.grupo{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(20px,5vw,96px);padding:clamp(36px,4.5vw,60px) 0;box-shadow:inset 0 1px 0 var(--t14)}
.grupo:last-child{box-shadow:inset 0 1px 0 var(--t14),inset 0 -1px 0 var(--t14)}
.listado .casos-l,.listado .solo{margin-top:0}
.grupo h2{font-size:clamp(26px,2.6vw,40px);line-height:1.1}
.grupo h2+p{margin-top:10px;color:var(--t72);font-size:15.5px;max-width:30ch}
.filas{list-style:none;margin:0;padding:0}
.filas li+li{box-shadow:inset 0 1px 0 var(--t14)}
.filas a{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:20px;align-items:center;padding:22px 0;text-decoration:none}
.filas li:first-child a{padding-top:2px}
.filas li:last-child a{padding-bottom:2px}
.filas h3{font-size:clamp(24px,2.3vw,34px);line-height:1.1}
.filas p{margin-top:8px;color:var(--t72);max-width:54ch}
.filas .meta{margin-top:10px;font-size:14px;color:var(--t58)}
.filas .i{width:22px;height:22px;color:var(--oliva);transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.filas a:hover .i{transform:translateX(4px)}.filas a:hover h3,.filas a:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--oliva);text-underline-offset:.18em}}
@media (max-width:899px){.grupo{grid-template-columns:minmax(0,1fr)}}
.solo{margin-top:clamp(40px,5vw,72px);box-shadow:inset 0 1px 0 var(--t14),inset 0 -1px 0 var(--t14)}
.solo li:first-child a{padding-top:22px}
.solo li:last-child a{padding-bottom:22px}
.ademas{margin-top:28px;color:var(--t72);max-width:62ch}

/* cases index */
.casos-l{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0}
.casos-l li{box-shadow:inset 0 1px 0 var(--t14)}
.casos-l li:last-child{box-shadow:inset 0 1px 0 var(--t14),inset 0 -1px 0 var(--t14)}
.casos-l a{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(24px,5vw,88px);align-items:center;padding:clamp(28px,3.5vw,48px) 0;text-decoration:none}
.casos-l .foto{aspect-ratio:4/5}
.casos-l h2{font-size:clamp(34px,3.6vw,52px)}
.casos-l .donde{margin-top:8px;font-size:15.5px;color:var(--t72)}
.casos-l .clave{margin-top:22px;font:400 clamp(21px,1.9vw,27px)/1.25 var(--ff-d);max-width:30ch}
.casos-l .clave span{display:block;margin-top:6px;font:400 16.5px/1.45 var(--ff-t);color:var(--t72)}
.casos-l .ver{margin-top:18px;display:inline-flex;gap:8px;align-items:center;min-height:44px;font-weight:600}
.casos-l .ver .i{width:18px;height:18px;color:var(--oliva);transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.casos-l a:hover .ver{text-decoration:underline;text-decoration-color:var(--oliva)}.casos-l a:hover .ver .i{transform:translateX(3px)}}
@media (max-width:640px){.casos-l a{grid-template-columns:minmax(0,1fr)}.casos-l .foto{max-width:300px}}

/* guides: a reading page */
.art .cab{max-width:920px;padding:clamp(16px,2.6vw,36px) 0 0}
.art h1{font-size:clamp(42px,4.3vw,68px);line-height:1.02}
.art .lead{margin-top:24px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--t72);max-width:52ch}
.firma{margin-top:22px;font-size:14.5px;color:var(--t58)}
.leer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);gap:clamp(40px,6vw,112px);align-items:start;margin-top:clamp(40px,5vw,72px);padding:clamp(40px,5vw,64px) 0 clamp(80px,9vw,128px);box-shadow:inset 0 1px 0 var(--t14)}
.cuerpo{max-width:68ch;font-size:18.5px;line-height:1.65}
.cuerpo>*+*{margin-top:18px}
.cuerpo h2{margin-top:clamp(48px,5.5vw,72px);font-size:clamp(26px,2.4vw,36px);line-height:1.12}
.cuerpo>h2:first-child{margin-top:0}
.cuerpo h2+p,.cuerpo h2+ul{margin-top:16px}
.cuerpo ul{padding-left:1.15em}
.cuerpo li+li{margin-top:8px}
.cuerpo li::marker{color:var(--oliva)}
.cuerpo strong{font-weight:600}
.cuerpo a{text-decoration:underline;text-decoration-color:var(--oliva);text-decoration-thickness:1.5px}
.nota-caso{margin-top:clamp(40px,4.5vw,56px);padding:26px 0 24px;box-shadow:inset 0 1px 0 var(--t14),inset 0 -1px 0 var(--t14)}
.nota-caso p{margin-top:10px;font:400 clamp(21px,1.9vw,27px)/1.28 var(--ff-d);letter-spacing:-.01em}
.nota-caso .enlace{margin-top:10px;font-size:16.5px}
.indice{position:sticky;top:calc(var(--head) + 40px);font-size:15px}
.indice ol{list-style:none;margin:12px 0 0;padding:0}
.indice a{display:block;padding:7px 0;color:var(--t72);text-decoration:none;line-height:1.35}
@media (hover:hover) and (pointer:fine){.indice a:hover{color:var(--tinta);text-decoration:underline}}
@media (max-width:980px){.leer{grid-template-columns:minmax(0,1fr)}.indice{display:none}}

/* the conversation, in oliva */
.cierre{padding:clamp(88px,10vw,144px) 0 clamp(72px,8vw,112px)}
.cierre .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,80px);align-items:end}
.cierre h2{font-size:clamp(32px,3.8vw,58px);line-height:1.02}
.cierre .lead3{margin-top:22px;font-size:18px;color:var(--c88);max-width:40ch}
.cierre .fino{margin-top:14px;font-size:14.5px;color:var(--c88)}
.cierre .otra{margin-top:22px;padding-top:18px;box-shadow:inset 0 1px 0 rgba(255,246,234,.18);font-size:15.5px;color:var(--c88)}
.cierre .otra a{color:var(--crema);font-weight:600}
@media (max-width:899px){.cierre .wrap{grid-template-columns:minmax(0,1fr);align-items:start}}

footer{padding:clamp(56px,7vw,88px) 0 calc(36px + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 rgba(255,246,234,.16)}
footer .cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr) minmax(0,1fr);gap:40px 48px;font-size:15.5px;color:var(--c88)}
footer .marca img{height:28px;width:auto;margin-bottom:16px}
footer .marca p{max-width:34ch}
footer .contacto{margin-top:14px}
footer b{display:block;color:var(--crema);font-weight:600;margin-bottom:6px}
footer ul{list-style:none;margin:0;padding:0}
footer .serv ul{columns:2;column-gap:32px}
footer .serv li{break-inside:avoid}
footer .mas b+ul{margin-bottom:22px}
footer a{text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:40px}
footer a .i{width:18px;height:18px}
@media (pointer:coarse){footer a{min-height:44px}}
@media (hover:hover) and (pointer:fine){footer a:hover{color:var(--crema);text-decoration:underline}}
.legalrow{margin-top:44px;padding-top:22px;box-shadow:inset 0 1px 0 rgba(255,246,234,.18);display:flex;gap:8px 22px;flex-wrap:wrap;font-size:14px;color:var(--c88)}
@media (max-width:980px){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}footer .marca{grid-column:1/-1}}
@media (max-width:620px){footer .cols{grid-template-columns:minmax(0,1fr)}footer .serv ul{columns:1}}

/* one authored moment: the hero photo settles as the page opens */
@media (prefers-reduced-motion:no-preference){
  .p-hero .foto img,.galeria .g1 img{animation:asienta 1400ms var(--ease-out) both}
}
@keyframes asienta{from{transform:scale(1.06)}}