:root{
  --sage:#618a7b; --sage-soft:#b0c5bd; --sage-mist:#e8efec;
  --cream:#faf9f6; --ink:#232826; --muted:#7c827e; --line:#dcdfdc;
  --sage-dark:#4f7365; --wa:#25D366;
  --hero-bg:#f3e6d6;   /* muestreado del fondo de la foto del hero */

  --fs-display:  clamp(2.125rem, 1.05rem + 4.77vw, 4.75rem);
  --fs-h2:       clamp(1.6875rem, 1.20rem + 2.16vw, 2.875rem);
  --fs-h3-serif: clamp(1.25rem,  1.20rem + 0.23vw, 1.375rem);
  --fs-tier:     clamp(1.5rem,   1.40rem + 0.45vw, 1.75rem);
  --fs-price:    clamp(2.125rem, 1.87rem + 1.14vw, 2.75rem);
  --fs-client:   clamp(1.625rem, 1.32rem + 1.36vw, 2.375rem);
  --fs-igtile:   clamp(1.25rem,  1.13rem + 0.55vw, 1.6rem);
  --fs-num:      clamp(2rem,     1.82rem + 0.80vw, 2.4rem);

  --fs-body:     clamp(1rem,     0.97rem + 0.11vw, 1.0625rem);
  --fs-lead:     clamp(1.0625rem,1.01rem + 0.23vw, 1.1875rem);
  --fs-sm:       clamp(0.9rem,   0.885rem + 0.07vw, 0.9375rem);
  --fs-xs:       0.8125rem;
  --fs-kicker:   clamp(0.72rem,  0.69rem + 0.11vw, 0.78rem);
  --fs-btn:      clamp(0.8rem,   0.785rem + 0.07vw, 0.84rem);
  --fs-nav:      0.75rem;

  --lh-display:1.06; --lh-h2:1.14; --lh-tight:1.25; --lh-body:1.7;

  --ls-kicker:0.22em; --ls-btn:0.16em; --ls-nav:0.16em;
  --ls-strip:0.18em;  --ls-label:0.20em;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:40px; --s-8:48px;
  --s-9:64px; --s-10:80px; --s-11:96px;

  --space-section: clamp(4rem, 2.82rem + 5.23vw, 6.875rem);
  --space-block:   clamp(2.5rem, 1.90rem + 2.73vw, 4.375rem);
  --gutter:        clamp(1.25rem, 0.94rem + 1.36vw, 2rem);
  --gap-grid:      clamp(0.875rem, 0.66rem + 0.95vw, 1.375rem);
  --wrap-max:1180px;

  --bar-h:64px; --tap-min:48px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
}
@media (min-width:900px){
  :root{--ls-kicker:0.35em;--ls-btn:0.22em;--ls-nav:0.22em;--ls-strip:0.28em;--ls-label:0.25em;}
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:300;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;-webkit-tap-highlight-color:transparent;}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;margin:0;text-wrap:balance;}
h1{font-size:var(--fs-display);line-height:var(--lh-display);}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);}
h3{font-size:var(--fs-h3-serif);line-height:var(--lh-tight);}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--sage);}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;}
.wrap{max-width:var(--wrap-max);margin-inline:auto;
  padding-inline:calc(var(--gutter) + var(--safe-l)) calc(var(--gutter) + var(--safe-r));}
section{padding-block:var(--space-section);}
.kicker{display:block;font-size:var(--fs-kicker);letter-spacing:var(--ls-kicker);
  text-transform:uppercase;color:var(--sage);font-weight:500;}
.lead{font-size:var(--fs-lead);color:var(--muted);max-width:46ch;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* Encabezado */
header{padding:var(--s-5) 0 0;text-align:center;border-bottom:1px solid var(--line);}
header .logo{display:inline-block;}
header img{height:48px;width:auto;margin-inline:auto;}
nav{margin-top:var(--s-4);display:flex;gap:var(--s-6);overflow-x:auto;scrollbar-width:none;
  padding-inline:calc(var(--gutter) + var(--safe-l)) calc(var(--gutter) + var(--safe-r));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);}
nav::-webkit-scrollbar{display:none;}
nav a{flex:0 0 auto;white-space:nowrap;text-decoration:none;color:var(--ink);
  font-size:var(--fs-nav);letter-spacing:var(--ls-nav);text-transform:uppercase;
  min-height:var(--tap-min);display:inline-flex;align-items:center;border-bottom:1px solid transparent;}
nav a:hover{color:var(--sage);}
nav a[aria-current="page"]{color:var(--sage);border-bottom-color:var(--sage);}
nav a.ig{color:var(--sage);font-weight:500;}
@media (min-width:900px){
  header{padding:34px 0 22px;} header img{height:74px;}
  nav{overflow:visible;justify-content:center;gap:42px;-webkit-mask-image:none;mask-image:none;}
}

/* Botones */
.btnrow{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-6);}
@media (min-width:600px){.btnrow{flex-direction:row;}}
.btn{display:grid;place-items:center;min-height:52px;padding-inline:var(--s-6);
  font-size:var(--fs-btn);letter-spacing:var(--ls-btn);text-transform:uppercase;
  text-decoration:none;font-weight:500;transition:background .25s,color .25s;text-align:center;}
@media (min-width:600px){.btn{min-width:210px;}}
.btn-solid{background:var(--sage);color:#fff;}
.btn-solid:hover{background:var(--sage-dark);}
.btn-ghost{border:1px solid var(--ink);color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--cream);}

/* Inicio: portada */
.hub-hero{padding:var(--s-9) 0 var(--s-7);text-align:center;}
.hub-hero h1{max-width:17ch;margin:var(--s-4) auto var(--s-5);}
.hub-hero .lead{margin-inline:auto;}

/* Inicio: las tres verticales */
.verticals{display:grid;gap:var(--s-8);padding-bottom:var(--space-section);}
@media (min-width:900px){.verticals{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid);}}
.vcard{display:block;text-decoration:none;color:inherit;}
.vcard__img{aspect-ratio:3/4;overflow:hidden;background:var(--sage-mist);}
.vcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.vcard:hover .vcard__img img{transform:scale(1.04);}
.vcard__num{display:block;margin-top:var(--s-5);font-size:var(--fs-kicker);
  letter-spacing:var(--ls-kicker);color:var(--sage);font-weight:500;}
.vcard h2{margin:var(--s-2) 0 var(--s-3);}
.vcard p{color:var(--muted);margin:0 0 var(--s-4);max-width:36ch;}
.vcard__go{font-size:var(--fs-btn);letter-spacing:var(--ls-btn);text-transform:uppercase;
  color:var(--sage);font-weight:500;display:inline-flex;gap:8px;align-items:center;min-height:var(--tap-min);}
.vcard__go span{transition:transform .25s;}
.vcard:hover .vcard__go span{transform:translateX(6px);}

/* Clientes */
.band{background:var(--sage-mist);}
.clients{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin-top:var(--space-block);border-top:1px solid var(--line);}
.clients a{font-size:var(--fs-client);line-height:1.15;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;min-height:64px;padding:var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom:1px solid var(--line);transition:color .2s;}
.clients a::after{content:"↗";font-size:.75rem;margin-left:6px;vertical-align:super;color:var(--sage-soft);}
.clients a:hover{color:var(--sage);}
@media (max-width:400px){.clients{grid-template-columns:minmax(0,1fr);}}
@media (min-width:760px){
  .clients{display:flex;flex-wrap:wrap;gap:18px 46px;border:0;align-items:baseline;}
  .clients a{display:inline;min-height:0;padding:0;border:0;}
}
.clients a{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;}

/* Pasos */
.steps{display:grid;gap:var(--s-7);margin-top:var(--s-7);}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-8);}}
.steps .n{font-family:"Cormorant Garamond",Georgia,serif;font-size:var(--fs-num);color:var(--sage);line-height:1;}
.steps h3{margin:var(--s-3) 0 var(--s-2);}
.steps p{color:var(--muted);margin:0;}

/* Cierre */
.final{border-top:1px solid var(--line);text-align:center;}
.final h2{margin-inline:auto;max-width:18ch;}
.final .lead{margin:var(--s-4) auto 0;}
.final .btnrow{justify-content:center;align-items:center;}
.final .btn{width:100%;}
@media (min-width:600px){.final .btn{width:auto;}}

/* Landing de vertical: portada partida */
.vhero{display:grid;gap:var(--s-7);padding:var(--s-8) 0 var(--s-8);align-items:center;}
@media (min-width:960px){.vhero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-10);padding:var(--s-9) 0;}}
.vhero h1{margin:var(--s-4) 0 var(--s-5);max-width:14ch;}
.vhero .btn{width:100%;}
@media (min-width:600px){.vhero .btn{width:auto;}}
.vhero__img{aspect-ratio:4/5;overflow:hidden;background:var(--sage-mist);}
.vhero__img img{width:100%;height:100%;object-fit:cover;}

/* Incluye */
.includes{display:grid;gap:var(--s-5);margin:var(--s-7) 0 0;padding:0;list-style:none;}
@media (min-width:760px){.includes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7);}}
.includes li{border-top:1px solid var(--line);padding-top:var(--s-4);}
.includes h3{margin-bottom:var(--s-2);}
.includes p{color:var(--muted);margin:0;}

/* Galería (mampostería) */
.grid{columns:1;column-gap:14px;margin-top:var(--s-7);}
@media (min-width:620px){.grid{columns:2;}}
@media (min-width:1080px){.grid{columns:3;column-gap:18px;}}
.tile{break-inside:avoid;margin:0 0 14px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--sage-soft),var(--sage) 85%);}
@media (min-width:1080px){.tile{margin-bottom:18px;}}
.tile img{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .4s;}
.tile:hover img{transform:scale(1.025);opacity:.9;}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;color:#fff;
  font-size:var(--fs-xs);letter-spacing:.04em;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;}
.tile:hover figcaption,.tile:focus-within figcaption{opacity:1;transform:none;}
@media (hover:none){.tile figcaption{opacity:1;transform:none;}}
.tile button{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:0;cursor:zoom-in;}
.tile button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}

/* Visor */
.lb[hidden]{display:none;}
.lb{position:fixed;inset:0;z-index:60;background:#0c0c0e;display:grid;grid-template-rows:auto 1fr auto;}
.lb__bar{display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutter);
  font-size:var(--fs-xs);letter-spacing:var(--ls-nav);text-transform:uppercase;color:#9a9a9a;}
.lb__stage{position:relative;min-height:0;padding:0 12px;}
.lb__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.lb__cap{padding:14px var(--gutter) 26px;text-align:center;color:#9a9a9a;font-size:var(--fs-sm);margin:0;}
.lb button{background:none;border:0;color:#9a9a9a;cursor:pointer;font:inherit;font-size:var(--fs-xs);
  letter-spacing:var(--ls-nav);text-transform:uppercase;padding:10px;min-width:44px;min-height:44px;}
.lb button:hover{color:#fff;}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);font-size:1.6rem!important;letter-spacing:0!important;padding:18px;}
.lb__prev{left:4px;} .lb__next{right:4px;}

/* Botón flotante de WhatsApp */
.fab{position:fixed;right:calc(16px + var(--safe-r));bottom:16px;z-index:40;width:56px;height:56px;border-radius:50%;
  background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.fab:hover{transform:scale(1.05);}

footer{border-top:1px solid var(--line);padding:var(--s-7) 0;font-size:var(--fs-sm);color:var(--muted);}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);justify-content:space-between;}
footer a{color:var(--muted);text-decoration:none;}
footer a:hover{color:var(--sage);}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}