/* Investments JP v5 — industrial premium: anthracite + corporate red on white, real photos first.
   Layout: dark split hero, light working sections, dark services band, black footer. Mobile first. */
:root{
  --red:#D42A1C; --red-d:#B02013; --red-t:#FCEDEB;
  --anth:#1C1F23; --anth-2:#262A2F; --anth-3:#33383E;
  --ink:#16181B; --gray:#5B6168; --gray-2:#8A9097;
  --mist:#F3F3F1; --line:#E1E1DD; --paper:#FFFFFF;
  --wa:#1FAF57; --wa-d:#178C45; --wa-t:#E9F7EE;
  --f:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --r:10px; --gut:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--f);font-size:16.5px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-stretch:75%;font-weight:800;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.6vw,3.1rem)}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
section{padding-block:72px}
@media(min-width:900px){section{padding-block:104px}:root{--gut:32px}}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.sub{color:var(--gray);font-size:1.05rem;line-height:1.7;max-width:60ch;margin-top:14px}
.ic{width:20px;height:20px;flex:0 0 auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:200;border-radius:6px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;border-radius:8px;border:1.5px solid transparent;font:700 .95rem/1.1 var(--f);text-decoration:none;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-lg{min-height:56px;padding:0 26px;font-size:1rem}
.btn-sm{min-height:40px;padding:0 14px;font-size:.88rem}
.btn-block{width:100%}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-d)}
.btn-line{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.wa-ic{width:21px;height:21px}

/* header */
.hdr{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:38px;width:auto}
.wordmark{font-weight:800;font-stretch:78%;font-size:1.05rem;letter-spacing:.05em;white-space:nowrap}
.wordmark b{color:var(--red)}
.links{display:none;gap:26px}
.links a{text-decoration:none;font-weight:600;font-size:.93rem;color:#3A3F45;padding:6px 0;border-bottom:2px solid transparent}
.links a:hover,.links a.active{color:var(--ink);border-color:var(--red)}
.nav-act{display:flex;align-items:center;gap:8px}
.lang{background:none;border:1.5px solid var(--line);border-radius:6px;font:700 .74rem var(--f);letter-spacing:.06em;height:36px;padding:0 10px;cursor:pointer}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1.5px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}
.menu-btn .ic{width:22px;height:22px}
.hide-s{display:none}
.mnav{border-top:1px solid var(--line);background:#fff;padding:8px var(--gut) 16px}
.mnav a{display:block;padding:13px 0;font-weight:700;font-size:1.05rem;text-decoration:none;border-bottom:1px solid var(--line)}
@media(min-width:1000px){.links{display:flex}.menu-btn{display:none}.mnav{display:none!important}.nav{height:72px}.brand img{height:44px}}
@media(min-width:620px){.hide-s{display:inline-flex}}

/* hero: full-bleed real yard photo, copy on a dark gradient */
.hero{background:var(--anth);color:#fff;padding:0;position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:min(640px,calc(100svh - 64px - 70px))}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,20,23,.96) 0%,rgba(18,20,23,.82) 42%,rgba(18,20,23,.25) 75%,rgba(18,20,23,.1) 100%)}
.hero-grid{position:relative;width:100%}
.hero-copy{padding-block:120px 36px;max-width:640px}
.hero .eyebrow{color:#fff;opacity:.9}
.hero .eyebrow::before{background:var(--red)}
.hero h1{font-size:clamp(2.4rem,9.6vw,4.9rem);line-height:.98;font-stretch:72%;letter-spacing:-.01em;text-transform:uppercase;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-p{color:#E3E6E9;margin-top:16px;max-width:52ch;font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.6}
.hero-cta{display:grid;gap:12px;margin-top:26px}
.hero-trust{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;font-weight:600;color:#E3E6E9}
.hero-trust li{display:flex;align-items:center;gap:6px}
.hero-trust .ic{width:16px;height:16px;color:#FF8A7D}
@media(min-width:620px){.hero-cta{grid-template-columns:auto auto;justify-content:start}}
@media(min-width:900px){
  .hero{min-height:min(720px,calc(100vh - 72px));align-items:center}
  .hero-media::after{background:linear-gradient(90deg,rgba(18,20,23,.94) 0%,rgba(18,20,23,.8) 36%,rgba(18,20,23,.2) 66%,rgba(18,20,23,0) 100%)}
  .hero-copy{padding-block:96px}
}

/* trust */
.trust{background:var(--mist)}
.flow{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:10px;counter-reset:f}
.flow li{position:relative;display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.f-ic{grid-row:span 2;width:52px;height:52px;border-radius:12px;background:var(--red-t);color:var(--red);display:flex;align-items:center;justify-content:center}
.f-ic .ic{width:28px;height:28px}
.flow b{font-stretch:80%;font-size:1.2rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.flow small{color:var(--gray);font-size:.88rem}
.flow li:not(:last-child)::after{content:"";position:absolute;left:41px;bottom:-11px;width:2px;height:12px;background:var(--red)}
@media(min-width:900px){
  .flow{grid-template-columns:repeat(4,1fr);gap:28px}
  .flow li{grid-template-columns:1fr;grid-template-rows:auto;text-align:left;padding:22px}
  .f-ic{grid-row:auto;margin-bottom:12px}
  .flow li:not(:last-child)::after{left:auto;right:-24px;top:50%;bottom:auto;width:20px;height:2px}
  .flow li:not(:last-child)::before{content:"";position:absolute;right:-26px;top:calc(50% - 4px);border:5px solid transparent;border-left:6px solid var(--red);z-index:1}
}
.trust-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.trust-grid li{background:#fff;display:flex;gap:14px;padding:18px}
.trust-grid li>.ic{color:var(--red);width:24px;height:24px;margin-top:2px}
.trust-grid b{display:block;font-size:1rem}
.trust-grid span{color:var(--gray);font-size:.92rem;line-height:1.55}
@media(min-width:620px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.trust-grid{grid-template-columns:repeat(3,1fr)}}

/* section head + chips */
.sec-head{display:flex;flex-direction:column;gap:20px;margin-bottom:28px}
@media(min-width:1000px){.sec-head{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
@media(min-width:1000px){.chips{margin:0;padding:0;flex-wrap:nowrap;justify-content:flex-end}}
.chip{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:999px;height:40px;padding:0 16px;font:600 .9rem var(--f);cursor:pointer;color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* catalogue */
.units{display:grid;gap:18px}
@media(min-width:700px){.units{grid-template-columns:repeat(2,1fr)}.units>.unit:nth-child(3){grid-column:1/-1}.units>.unit:nth-child(3) .u-media{aspect-ratio:21/9}}
@media(min-width:1100px){.units{grid-template-columns:repeat(6,1fr)}.units>.unit{grid-column:span 3}.units>.unit[data-group="seco"]{grid-column:span 2}.units>.unit:nth-child(3) .u-media{aspect-ratio:16/10}}
.unit{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}
.unit:hover{border-color:#cfcfca;box-shadow:0 14px 34px rgba(16,18,20,.08)}
.unit[hidden]{display:none}
.u-media{position:relative;aspect-ratio:16/10;background:var(--mist);display:flex;align-items:center;justify-content:center;overflow:hidden}
.u-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(22,24,27,.86);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:6px}
.u-badge .ic{width:15px;height:15px}
.soon{position:absolute;right:12px;bottom:10px;font-size:.74rem;color:var(--gray);font-weight:600}
.schem{width:92%;max-width:420px;height:auto}
.s-body{fill:#fff;stroke:#3A3F45;stroke-width:1.6}
.s-rib{stroke:#C9CACA;stroke-width:1}
.s-corner{fill:#3A3F45}
.s-unit{fill:#E9EBEE;stroke:#3A3F45;stroke-width:1.2}
.s-fan{fill:none;stroke:#3A3F45;stroke-width:1.2}
.s-win{fill:#DDE6EE;stroke:#3A3F45;stroke-width:1.2}
.s-door{fill:#F1F1EF;stroke:#3A3F45;stroke-width:1.2}
.s-dim{stroke:var(--red);stroke-width:1.2}
.s-txt{font:500 11px var(--mono);fill:var(--ink)}
.u-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.u-body h3{font-size:1.6rem;font-stretch:72%}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0}
.spec div{background:#fff;padding:8px 10px}
.spec div:last-child:nth-child(odd){grid-column:1/-1}
.spec dt{font-size:.74rem;color:var(--gray);font-weight:600}
.spec dd{margin:0;font:500 .9rem var(--mono);font-variant-numeric:tabular-nums}
.u-use{color:#3A3F45;font-size:.95rem}
.u-note{font-size:.82rem;font-weight:700;color:var(--red)}
.u-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:4px}
.u-actions .btn{padding:0 10px;font-size:.88rem}
.u-actions .btn-wa{grid-column:1/-1}

/* WhatsApp strip */
.wa-strip{margin-top:28px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:var(--wa-t);border:1px solid #CDEBD7;border-radius:12px;padding:20px}
.wa-strip strong{display:block;font-size:1.15rem;font-stretch:85%}
.wa-strip>div>span{color:#3A4A40;font-size:.95rem}
.wa-strip .btn{width:100%}
.wa-strip.dark{background:var(--anth-2);border-color:var(--anth-3)}
.wa-strip.dark strong{color:#fff}.wa-strip.dark>div>span{color:#C9CDD2}
@media(min-width:700px){.wa-strip{flex-direction:row;align-items:center;justify-content:space-between;padding:22px 26px}.wa-strip .btn{width:auto}}

/* services */
.services{background:var(--anth);color:#fff}
.services .eyebrow{color:#FF8A7D}
.svc{display:grid;gap:18px;margin-top:32px}
@media(min-width:900px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc article{background:var(--anth-2);border:1px solid var(--anth-3);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.svc-img{aspect-ratio:16/10;position:relative;overflow:hidden}
.svc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1;position:relative}
.svc-ic{position:absolute;right:20px;top:-26px;width:52px;height:52px;border-radius:12px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.svc-ic .ic{width:28px;height:28px}
.svc h3{font-size:1.7rem;text-transform:uppercase;font-stretch:72%;letter-spacing:.01em}
.svc p{color:#C9CDD2}
.svc ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--anth-3)}
.svc li{padding:9px 0;border-bottom:1px solid var(--anth-3);font-size:.93rem;color:#E3E5E8;display:flex;gap:10px}
.svc li::before{content:"";width:6px;height:6px;background:var(--red);margin-top:.62em;flex:0 0 auto}
.svc-cta{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lnk-wa{display:inline-flex;align-items:center;gap:7px;color:#7EE2A5;font-weight:700;text-decoration:none}
.lnk-wa:hover{text-decoration:underline}

/* projects */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:700px){.gallery{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:1100px){.gallery{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;border:0;padding:0;margin:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--mist);aspect-ratio:1/1;display:block;width:100%}
.tile.big{grid-column:1/-1;aspect-ratio:16/10}
@media(min-width:700px){.tile.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
.tile[hidden]{display:none}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tile:hover img{transform:scale(1.03)}
.tile .cap{position:absolute;inset:auto 0 0 0;padding:28px 10px 9px;background:linear-gradient(0deg,rgba(10,11,13,.82),rgba(10,11,13,0));color:#fff;font-size:.8rem;font-weight:600;line-height:1.3;text-align:left}
.tile.big .cap{font-size:.95rem;padding:40px 16px 14px}
.play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(212,42,28,.92);color:#fff;display:flex;align-items:center;justify-content:center}
.play .ic{width:26px;height:26px;margin-left:3px}

/* how to */
.howto{background:var(--mist)}
.steps{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:18px}}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;gap:16px;align-items:flex-start}
@media(min-width:900px){.steps li{flex-direction:column}}
.st-n{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-stretch:75%;font-size:1.35rem;display:flex;align-items:center;justify-content:center}
.steps b{font-weight:700;font-size:1.02rem;line-height:1.45}
.howto-cta{display:grid;gap:12px;margin-top:28px}
@media(min-width:620px){.howto-cta{grid-template-columns:auto auto;justify-content:start}}

/* quote form */
.q-grid{display:grid;gap:32px}
@media(min-width:1000px){.q-grid{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}.q-side{position:sticky;top:100px}}
.q-points{list-style:none;margin:22px 0 0;padding:0}
.q-points li{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-weight:600}
.q-points .ic{color:var(--red)}
.q-alt{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--gray);font-weight:600}
.q-form{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:12px;padding:22px 18px;box-shadow:0 18px 44px rgba(16,18,20,.07)}
@media(min-width:620px){.q-form{padding:30px}}
fieldset{border:0;margin:0 0 8px;padding:0}
legend{font-weight:800;font-stretch:80%;font-size:1.25rem;margin-bottom:14px;padding:0}
.f{margin-bottom:16px;min-width:0}
.f-row{display:grid;gap:0 16px}
@media(min-width:620px){.f-row{grid-template-columns:1fr 1fr}}
label,.lbl{display:block;font-size:.82rem;font-weight:700;margin-bottom:6px;color:#2B2F34}
input,select,textarea{width:100%;font:400 16px/1.4 var(--f);color:var(--ink);background:#FAFAF8;border:1.5px solid #D5D5D0;border-radius:8px;padding:12px 13px;min-height:50px;appearance:none;-webkit-appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316181B' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(22,24,27,.1)}
.f.bad input,.f.bad select{border-color:var(--red);background:#FFF8F7}
.err{display:block;color:var(--red);font-size:.82rem;font-weight:600;min-height:0;margin-top:5px}
.err:empty{display:none}
.f-help{font-size:.88rem;color:#3A3F45;line-height:1.5;margin:0 0 10px}
.req-mark{color:var(--red)}
.req-mark.opt{color:var(--gray);font-weight:600;font-size:.78rem}
.f.bad .seg span{border-color:var(--red)}
.geo-f{background:var(--mist);border:1.5px solid var(--line);border-radius:10px;padding:14px 14px 12px}
.f.bad.geo-f,.f.bad#w_photos{border-color:var(--red);background:#FFF8F7}
.geo-status{margin-top:10px;padding:10px 12px;border-radius:8px;font-size:.9rem;font-weight:600;line-height:1.45;background:#ECFDF3;color:#166534;border:1px solid #BBF7D0}
.geo-status.bad{background:#FEF2F2;color:#991B1B;border-color:#FECACA;font-weight:500}
.geo-status a{color:inherit;font-weight:700}
.geo-f .btn-block,#w_photos .btn-block{white-space:normal;text-align:center;line-height:1.2;padding:12px 16px}
.geo-tools{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:stretch}
.geo-tools input{min-height:44px;padding:8px 12px;background:#fff}
.geo-tools .btn{min-height:44px;white-space:nowrap}
@media(max-width:519px){.geo-tools{grid-template-columns:1fr 1fr}.geo-tools input{grid-column:1/-1}}
.geo-map{height:320px;margin-top:10px;border-radius:8px;border:1.5px solid #D5D5D0;background:#E9E9E4;overflow:hidden;position:relative;z-index:0}
@media(min-width:620px){.geo-map{height:380px}}
.geo-map[hidden]{display:none}
.geo-tip{margin:8px 0 0;font-size:.82rem;color:#5B6168}
.geo-sub{font-weight:500;font-size:.84rem;opacity:.9}
.btn[hidden],.ph-grid[hidden],.geo-map[hidden]{display:none}
.f.bad .seg span{box-shadow:0 0 0 1.5px var(--red)}
.geo-ov{position:absolute;inset:0;z-index:1200;border:0;padding:0;background:rgba(22,24,27,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;font:700 .95rem var(--f);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.geo-pin{background:none;border:0}
.geo-pin svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
/* Leaflet controls must not inherit the form's input/label styles */
.leaflet-container{font:400 13px/1.3 var(--f)}
.leaflet-container section{padding:0;margin:0}
.leaflet-container input{width:auto;min-height:0;padding:0;margin:0 6px 0 0;appearance:auto;-webkit-appearance:radio;background:none;border:0;box-shadow:none}
.leaflet-container label{display:flex;align-items:center;font-size:.85rem;font-weight:600;margin:2px 0;color:var(--ink)}
.leaflet-control-layers{border-radius:8px}
.leaflet-control-layers-expanded{padding:8px 12px 8px 8px}
.leaflet-bar a{color:var(--ink)}
.geo-alt{margin-top:12px}
.geo-alt label{font-size:.82rem;font-weight:600;color:#3A3F45}
.geo-alt input{background:#fff}
#w_photos{background:var(--mist);border:1.5px solid var(--line);border-radius:10px;padding:14px 14px 12px}
.ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.ph-thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#E9E9E4;border:1px solid var(--line)}
.ph-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph-del{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font:700 18px/28px var(--f);text-align:center;cursor:pointer;padding:0}
.ph-del:hover{background:var(--red)}
.ph-count{font-size:.85rem;font-weight:600;color:#166534;margin:8px 0 0}
.ph-count:empty{display:none}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg label{margin:0;position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.seg span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1.5px solid #D5D5D0;border-radius:8px;font-weight:600;font-size:.92rem;cursor:pointer;background:#FAFAF8}
.seg input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.photo-note{display:flex;gap:10px;background:var(--mist);border-radius:8px;padding:12px 14px;font-size:.88rem;color:#3A3F45;margin:4px 0 16px}
.photo-note .ic{color:var(--red);margin-top:2px}
.form-note{text-align:center;font-size:.82rem;color:var(--gray);margin-top:12px}
.form-ok{text-align:center;padding:28px 6px}
.form-ok h3{font-size:1.9rem;margin:12px 0 8px}
.form-ok p{color:var(--gray);max-width:46ch;margin:0 auto 18px}
.form-ok .btn{margin:6px}
.ok-ic{display:inline-flex;width:58px;height:58px;border-radius:50%;background:var(--wa-t);color:var(--wa);align-items:center;justify-content:center}
.ok-ic .ic{width:30px;height:30px}
.q-form.sent fieldset,.q-form.sent .photo-note,.q-form.sent #qSubmit,.q-form.sent .form-note{display:none}

/* coverage */
.cov-grid{display:grid;gap:32px;align-items:center}
@media(min-width:1000px){.cov-grid{grid-template-columns:.9fr 1.1fr;gap:56px}}
.prov{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.prov li{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:600;background:#fff}
.cov-note{font-size:.8rem;color:var(--gray-2);margin-top:14px}
.map-box{background:var(--mist);border-radius:14px;padding:18px;overflow:hidden}
.pa-map{width:100%;height:auto}
.pa-land{fill:#fff;stroke:#CFCFCA;stroke-width:1.5}
.pa-route{fill:none;stroke:var(--anth);stroke-width:4;stroke-linecap:round}
.pa-spur{fill:none;stroke:var(--anth);stroke-width:2.5;stroke-dasharray:2 5;stroke-linecap:round}
.pa-dot{fill:var(--red);stroke:#fff;stroke-width:2.5}
.pa-lbl{font:700 14px var(--f);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}

/* about */
.about{background:#fff;border-top:1px solid var(--line)}
.about-grid{display:grid;gap:28px}
@media(min-width:1000px){.about-grid{grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}}
.about p{color:#3A3F45;margin-top:14px;max-width:62ch}
.facts{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--gray);font-weight:600;font-size:.9rem}
.facts dd{margin:0;font-weight:700;text-align:right}

/* faq */
.faq{background:var(--mist)}
.faq-grid{display:grid;gap:24px}
@media(min-width:1000px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:56px}}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;justify-content:space-between;gap:14px;align-items:center;font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.fx{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:transform .2s}
.faq-item[open] .fx{transform:rotate(45deg);background:var(--red);color:#fff}
.faq-item p{padding:0 18px 16px;color:#3A3F45}

/* footer */
.ftr{background:#111214;color:#B9BEC5;padding-top:56px;padding-bottom:90px}
@media(min-width:900px){.ftr{padding-bottom:0}}
.f-grid{display:grid;gap:30px}
@media(min-width:700px){.f-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.f-grid{grid-template-columns:1.2fr 1.1fr 1fr .8fr}}
.ftr .wordmark{color:#fff}
.ftr .brand img{height:40px;background:#fff;border-radius:6px;padding:2px}
.f-tag{color:#fff;font-weight:700;margin-top:14px}
.f-txt{margin-top:10px;font-size:.92rem;line-height:1.6}
.f-h{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-stretch:100%;margin-bottom:12px}
.f-l{display:flex;align-items:center;gap:10px;padding:6px 0;text-decoration:none;font-size:.93rem}
.f-l:hover{color:#fff}
.f-l .ic{color:var(--red);width:18px;height:18px}
.f-bottom{border-top:1px solid #23252A;margin-top:40px;padding-block:18px;font-size:.8rem;color:#7D838B}

/* floating WhatsApp + mobile bar */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;width:60px;height:60px;border-radius:50%;background:var(--wa);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.wa-float .wa-ic{width:32px;height:32px}
.wa-float:hover{background:var(--wa-d)}
@media(min-width:900px){.wa-float{display:flex}}
.m-bar{position:fixed;left:0;right:0;bottom:0;z-index:85;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:8px;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
.m-bar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px;border-radius:9px;text-decoration:none;font-weight:700;font-size:.92rem;border:1.5px solid var(--line);color:var(--ink)}
.m-bar .mb-wa{background:var(--wa);border-color:var(--wa);color:#fff;font-size:1rem}
.m-bar .mb-q{background:var(--red);border-color:var(--red);color:#fff}
@media(min-width:900px){.m-bar{display:none}}
@media(max-width:899px){body{padding-bottom:72px}}

/* WhatsApp chooser (two contacts) */
.wa-pick{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0}
.wa-pick::backdrop{background:rgba(10,11,13,.55)}
.wa-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.2)}
@media(min-width:620px){.wa-sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:420px;border-radius:16px}}
.wa-sheet h3{font-size:1.4rem;margin-bottom:4px}
.wa-sheet p{color:var(--gray);font-size:.92rem;margin-bottom:14px}
.wa-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;text-decoration:none;margin-bottom:10px}
.wa-opt:hover{border-color:var(--wa)}
.wa-opt .wa-dot{width:44px;height:44px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.wa-opt b{display:block;font-size:1.05rem}
.wa-opt small{color:var(--gray)}
.wa-cancel{width:100%;margin-top:4px}

/* lightbox */
.lb{border:0;padding:0;background:#0B0C0E;color:#fff;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0}
.lb::backdrop{background:#0B0C0E}
.lb-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,0))}
.lb-cap{flex:1;font-weight:600;font-size:.95rem}
.lb-count{font:500 .82rem var(--mono);color:#B9BEC5}
.lb-x{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:64px 0 24px}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;object-fit:contain}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;z-index:2}
.lb-nav.prev{left:10px}.lb-nav.next{right:10px}
@media(max-width:620px){.lb-nav{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none}}

/* ================= v6: multi-page layout, calmer contact ================= */
.sec-mist{background:var(--mist)}
.sec-dark{background:var(--anth);color:#fff}
.sec h2{margin-bottom:6px}
.links a.active{color:var(--ink);border-color:var(--red)}
.mnav .mnav-cta{color:var(--red)}
.nav-act .btn-red{color:#fff}

/* inner page header */
.phead{position:relative;background:var(--anth);color:#fff;overflow:hidden;padding-block:0}
.phead-bg{position:absolute;inset:0}
.phead-bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.phead-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,20,23,.92),rgba(18,20,23,.55))}
.phead-in{position:relative;padding-block:44px 40px}
@media(min-width:900px){.phead-in{padding-block:72px 64px}}
.crumb{display:flex;gap:8px;font-size:.82rem;font-weight:600;color:#C9CDD2;margin-bottom:14px}
.crumb a{color:#fff;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.phead h1{font-size:clamp(2.1rem,7vw,3.8rem);text-transform:uppercase;font-stretch:72%;max-width:20ch}
.phead-p{color:#D7DADE;margin-top:14px;max-width:60ch;font-size:1.05rem}

/* home: flow (compact) */
.flow li{grid-template-rows:auto}
.flow b{align-self:center}

/* home: three doors */
.go-grid{display:grid;gap:14px;margin-top:26px}
@media(min-width:900px){.go-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.go{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;transition:box-shadow .2s,border-color .2s}
.go:hover{border-color:#cfcfca;box-shadow:0 14px 34px rgba(16,18,20,.08)}
.go-img{position:relative;aspect-ratio:16/9;overflow:hidden;display:block}
.go-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.go-body{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 56px 18px 18px}
.go-body b{font-size:1.3rem;font-stretch:78%;font-weight:800}
.go-body small{color:var(--gray);font-size:.92rem}
.go-body i{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center}
.go-body i .ic{width:18px;height:18px}

/* home: projects peek */
.sec-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--red);text-decoration:none}
.lnk:hover{text-decoration:underline}
.peek{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:22px}
@media(min-width:900px){.peek{grid-template-columns:repeat(4,1fr);gap:12px}}
.peek-i{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;text-decoration:none}
.peek-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.peek-i span{position:absolute;inset:auto 0 0 0;padding:24px 10px 9px;background:linear-gradient(0deg,rgba(10,11,13,.8),rgba(10,11,13,0));color:#fff;font-size:.8rem;font-weight:600;line-height:1.3}

/* home: closing band */
.cta-band{display:flex;flex-direction:column;gap:20px}
.cta-band p{color:#C9CDD2;margin-top:8px;max-width:52ch}
@media(min-width:900px){.cta-band{flex-direction:row;justify-content:space-between;align-items:center}}

/* catalogue page */
.chips{margin-bottom:20px}
@media(min-width:1000px){.chips{justify-content:flex-start}}
.u-actions{grid-template-columns:1fr 1fr}
.u-actions .btn-red{grid-column:auto}
.note{margin-top:24px;color:var(--gray)}
.note a{color:var(--red);font-weight:700}
.units-2{grid-template-columns:1fr!important}
@media(min-width:700px){.units-2{grid-template-columns:1fr 1fr!important}}
.units-2>.unit{grid-column:auto!important}
.units-2 .u-media{aspect-ratio:16/10!important}

/* split / prose */
.split{display:grid;gap:28px}
@media(min-width:1000px){.split{grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}}
.prose p{color:#3A3F45;margin-top:12px;max-width:62ch}
.ticks{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.ticks .ic{color:var(--red);margin-top:2px}
.gallery-4{margin-top:22px}
@media(min-width:1100px){.gallery-4{grid-template-columns:repeat(4,1fr)}}

/* transport & cranes */
.stack{display:grid;gap:48px}
.svc2{display:grid;gap:22px;align-items:center}
@media(min-width:900px){.svc2{grid-template-columns:1fr 1fr;gap:48px}.svc2.rev .svc2-img{order:2}}
.svc2-img{border-radius:12px;overflow:hidden;aspect-ratio:4/3;position:relative}
.svc2-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.steps{margin-top:22px}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}

/* quote page */
.h-sm{font-size:1.6rem;margin-bottom:6px}
.steps-v{grid-template-columns:1fr!important;gap:10px;margin-top:14px}
.steps-v li{flex-direction:row!important;padding:14px 16px}
.steps-v .st-n{width:34px;height:34px;font-size:1.1rem}
.steps-v b{font-size:.95rem}
.contact-box{margin-top:18px;background:var(--mist);border-radius:12px;padding:18px;display:grid;gap:12px}
.cb-lines{display:grid;gap:6px}
.cb-lines a{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:.95rem}
.cb-lines .ic{color:var(--red);width:18px;height:18px}
@media(max-width:999px){.q-side{order:2}}

/* footer: simpler */
@media(min-width:1000px){.f-grid{grid-template-columns:1.4fr 1fr 1fr}}
.f-bottom a{color:#B9BEC5}

/* mobile bar: always visible — it is the contact shortcut (hero has no buttons) */
@media(max-width:899px){body{padding-bottom:0}.ftr{padding-bottom:96px}}

/* contact page: the one place with every channel */
.ct-grid{display:grid;gap:14px}
@media(min-width:700px){.ct-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.ct-grid{grid-template-columns:repeat(4,1fr)}}
.ct{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:8px}
.ct h2{font-size:1.45rem;font-stretch:78%}
.ct p{color:var(--gray);font-size:.95rem}
.ct-ic{width:48px;height:48px;border-radius:12px;background:var(--red-t);color:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.ct-ic .ic{width:24px;height:24px}
.ct-ic.ct-wa{background:var(--wa-t);color:var(--wa)}
.ct-btns{display:grid;gap:8px;margin-top:auto;padding-top:8px}
.ct-lines{display:grid;gap:6px;margin-top:auto;padding-top:8px}
.ct-lines a{font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--ink);word-break:break-word}
.ct-lines a:hover{color:var(--red)}
.ct-info{margin-top:18px;background:var(--mist);border-radius:12px;padding:20px;display:grid;gap:16px;align-items:center}
@media(min-width:900px){.ct-info{grid-template-columns:1fr 1fr auto}}
.ct-info>div{display:flex;gap:12px;align-items:flex-start}
.ct-info>div>.ic{color:var(--red);width:24px;height:24px}
.ct-info b{display:block}
.ct-info span span{color:var(--gray);font-size:.95rem}
.q-alt2{margin-top:16px;color:var(--gray)}
.q-alt2 a{color:var(--red);font-weight:700}

/* mission & vision */
.mv{display:grid;gap:14px}
@media(min-width:900px){.mv{grid-template-columns:1fr 1fr;gap:18px}}
.mv article{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:24px}
.mv p{color:#3A3F45;margin-top:10px;font-size:1.05rem;line-height:1.7}

/* v6.4: yard address + directions on the contact page (matches Google Business Profile) */
@media(min-width:700px){.ct-info{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.ct-info{grid-template-columns:1.3fr 1fr 1fr auto}}
.ct-info .ct-map{display:flex;width:fit-content;margin-top:4px;color:var(--red);font-weight:700;font-size:.95rem;text-decoration:none}
.ct-info .ct-map:hover{text-decoration:underline}

/* v6.1: menu fits — full menu only on wide screens */
.links{gap:22px}
.links a{white-space:nowrap}
@media(min-width:1000px) and (max-width:1199px){.links{display:none}.menu-btn{display:inline-flex}.mnav:not([hidden]){display:block!important}}


/* ================= v7: estilo iPhone (iOS) — aprobado por Jeffrey el 3 oct 2026 =================
   System font, light gray ground (#F5F5F7) with white rounded cards, translucent header and bottom bar,
   pill buttons, large sentence-case titles, JP red as the only accent. Overrides v5 style.css + v6 extra.css. */
:root{
  --red:#C8221A; --red-d:#A81B14; --red-t:rgba(200,34,26,.10);
  --anth:#1D1D1F; --anth-2:#2C2C2E; --anth-3:#3A3A3C;
  --ink:#1D1D1F; --gray:#5E5E63; --gray-2:#6E6E73;
  --mist:#F5F5F7; --line:#E5E5EA; --paper:#FFFFFF;
  --wa:#1E9E57; --wa-d:#178A4B; --wa-t:rgba(30,158,87,.12);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:20px;
}
body{background:var(--mist);line-height:1.55;letter-spacing:-.003em}
h1,h2,h3{font-stretch:100%;font-weight:700;letter-spacing:-.022em;text-transform:none}
h2{font-size:clamp(2rem,5vw,3.3rem);line-height:1.07}
.sub{color:var(--gray);font-size:1.1rem;line-height:1.5}
.eyebrow{font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--red)}
.eyebrow::before{display:none}
.trust,.sec-mist,.howto,.faq,.about,.services{background:transparent}
.about{border-top:0}
:focus-visible{outline-color:var(--red)}

/* header: translucent bar */
.hdr{background:rgba(251,251,253,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.wordmark{font-stretch:100%;font-weight:800;letter-spacing:.06em;font-size:1rem}
.links a{font-weight:500;font-size:.9rem;color:#333336;border-bottom:0}
.links a:hover,.links a.active{color:var(--red);border-color:transparent}
.lang{border:0;background:rgba(0,0,0,.06);border-radius:999px;height:34px;padding:0 13px;font-weight:600;letter-spacing:.02em}
.menu-btn{border:0;background:rgba(0,0,0,.06);border-radius:999px}
.mnav{background:rgba(251,251,253,.97);border-top-color:rgba(0,0,0,.08)}
.mnav a{font-weight:600;border-bottom-color:var(--line)}
@media(min-width:1000px){.nav{height:60px}}

/* buttons: pills */
.btn{border-radius:999px;font-weight:600;letter-spacing:0;border-width:1px}
.btn:active{transform:scale(.98)}
.btn-line{background:#fff;border-color:#D2D2D7;color:var(--ink)}
.btn-line:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn-ghost{background:rgba(0,0,0,.06);border-color:transparent}
.btn-ghost:hover{background:rgba(0,0,0,.09);border-color:transparent}

/* home hero: big centered title, photo below in a rounded card */
.hero{background:transparent;color:var(--ink);display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:visible}
.hero-grid{order:1}
.hero-copy{max-width:900px;margin:0 auto;padding-block:64px 0;text-align:center}
.hero .eyebrow{color:var(--red);opacity:1;justify-content:center}
.hero h1{font-size:clamp(2.5rem,7vw,5rem);line-height:1.04;font-stretch:100%;font-weight:700;letter-spacing:-.03em;text-transform:none;text-shadow:none}
.hero-p{color:var(--gray);margin:18px auto 0;max-width:42ch;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.45}
.hero-trust{justify-content:center;color:var(--ink);font-weight:500;font-size:.95rem}
.hero-trust .ic{color:var(--red)}
.hero-media{position:relative;inset:auto;order:2;width:calc(100% - 2 * var(--gut));max-width:calc(1180px - 2 * var(--gut));margin:36px auto 0;height:clamp(240px,46vw,560px);border-radius:28px;overflow:hidden}
.hero-media::after{display:none}
.hero-media img{object-position:50% 50%}
@media(min-width:900px){.hero{min-height:0}.hero-copy{padding-block:96px 0}.hero-media::after{display:none}}

/* inner page header: large title, no photo band */
.phead{background:transparent;color:var(--ink)}
.phead-bg{display:none}
.phead-in{padding-block:48px 0}
@media(min-width:900px){.phead-in{padding-block:80px 0}}
.crumb{color:var(--gray);font-weight:500}
.crumb a{color:var(--red)}
.phead h1{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05;text-transform:none;font-stretch:100%;font-weight:700;letter-spacing:-.03em;max-width:22ch}
.phead-p{color:var(--gray);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5}

/* home: process, doors, projects, closing card */
.flow li{border:0;border-radius:22px;background:#fff}
.flow b{font-stretch:100%;font-weight:600;font-size:1.15rem;text-transform:none;letter-spacing:-.01em}
.flow li:not(:last-child)::after,.flow li:not(:last-child)::before{display:none}
@media(min-width:900px){.flow{gap:16px}}
.f-ic{border-radius:14px}
.trust-grid{border:0;gap:12px;background:transparent;overflow:visible}
.trust-grid li{border-radius:20px}
.go{border:0;border-radius:28px}
.go:hover{border-color:transparent;box-shadow:0 12px 32px rgba(0,0,0,.08)}
.go-body{padding:20px 60px 22px 22px}
.go-body b{font-stretch:100%;font-weight:700;letter-spacing:-.015em;font-size:1.35rem}
.go-body i{background:var(--red-t);color:var(--red)}
.lnk{font-weight:500;color:var(--red)}
.peek{gap:12px}
.peek-i{border-radius:22px}
.peek-i span{inset:auto auto 10px 10px;max-width:calc(100% - 20px);padding:6px 12px;border-radius:999px;background:rgba(20,20,22,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-weight:500}
.sec-dark{background:transparent;color:var(--ink)}
.sec-dark .cta-band{background:#1D1D1F;color:#fff;border-radius:32px;width:calc(100% - 2 * var(--gut));max-width:calc(1180px - 2 * var(--gut));padding:clamp(32px,5vw,64px)}
.cta-band p{color:#B8B8BD}

/* catalogue cards */
.chip{border:0;background:rgba(0,0,0,.06);height:36px;font-weight:600}
.chip.on{background:var(--ink);color:#fff}
.unit{border:0;border-radius:24px}
.unit:hover{border-color:transparent;box-shadow:0 12px 32px rgba(0,0,0,.08)}
.u-media{background:#F5F5F7}
.u-badge{border-radius:999px;background:rgba(20,20,22,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.u-body h3{font-stretch:100%;font-weight:700;letter-spacing:-.015em;font-size:1.45rem}
.spec{border:0;border-radius:14px;background:#E5E5EA}
.spec div{background:#F7F7F9}
.spec dd{font-family:var(--f);font-weight:600}
.wa-strip{border:0;border-radius:22px}

/* services, galleries, steps */
.services .eyebrow{color:var(--red)}
.svc article{background:#fff;border:0;border-radius:28px}
.svc h3{text-transform:none;font-stretch:100%;font-weight:700;letter-spacing:-.015em}
.svc p{color:var(--gray)}
.svc ul{border-top-color:var(--line)}
.svc li{border-bottom-color:var(--line);color:var(--ink)}
.lnk-wa{color:var(--wa-d)}
.tile{border-radius:20px}
.tile .cap{inset:auto auto 10px 10px;max-width:calc(100% - 20px);padding:6px 12px;border-radius:999px;background:rgba(20,20,22,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-weight:500}
.tile.big .cap{padding:8px 14px}
.svc2-img{border-radius:24px}
.steps li{border:0;border-radius:20px}
.contact-box{background:#fff;border-radius:22px}

/* quote form */
.q-form{border:0;border-top:0;border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
legend{font-stretch:100%;font-weight:700;letter-spacing:-.01em}
label,.lbl{font-weight:600;color:#3A3A3C}
input,select,textarea{background:#F5F5F7;border:1px solid transparent;border-radius:12px}
input:focus,select:focus,textarea:focus{background:#fff;border-color:var(--red);box-shadow:0 0 0 4px var(--red-t)}
.f.bad input,.f.bad select{border-color:var(--red);background:#FFF5F4}
.seg span{border:0;background:#F5F5F7;border-radius:12px}
.seg input:checked+span{background:var(--ink);color:#fff}
.photo-note{border-radius:14px}

/* about, faq, contact, coverage */
.facts{border:0;background:#fff;border-radius:20px}
.mv article{border:0;border-radius:24px}
.faq-item{border:0;border-radius:18px}
.fx{background:#F5F5F7}
.ct{border:0;border-radius:24px}
.ct h2{font-stretch:100%;font-weight:700;letter-spacing:-.015em}
.ct-ic{border-radius:14px}
.ct-info{background:#fff;border-radius:24px}
.prov li{border:0;background:#fff}
.map-box{border-radius:24px;background:#fff}

/* footer: light */
.ftr{background:var(--mist);color:var(--gray);border-top:1px solid #D2D2D7}
.ftr .wordmark,.f-tag{color:var(--ink)}
.ftr .brand img{background:transparent}
.f-h{color:var(--ink);letter-spacing:0;text-transform:none;font-size:.95rem}
.f-l{color:var(--gray)}
.f-l:hover{color:var(--ink)}
.f-bottom{border-top-color:#D2D2D7;color:var(--gray)}
.f-bottom a{color:var(--gray)}

/* mobile bar, WhatsApp button and chooser */
.m-bar{background:rgba(251,251,253,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid rgba(0,0,0,.08)}
.m-bar a{border:0;border-radius:999px;background:rgba(0,0,0,.06);font-weight:600}
.m-bar .mb-wa{background:var(--wa);color:#fff}
.m-bar .mb-q{background:var(--red);color:#fff}
.wa-float{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.wa-sheet{border-radius:22px 22px 0 0}
@media(min-width:620px){.wa-sheet{border-radius:22px}}
.wa-opt{border:0;background:#F5F5F7;border-radius:16px}
.wa-opt:hover{background:#EDEDF0}

/* rhythm: sections share one light ground, so tighter vertical spacing */
section{padding-block:52px}
@media(min-width:900px){section{padding-block:76px}}
.hero{padding:0}
.flow li{grid-template-rows:auto}
.flow b{align-self:center}
@media(max-width:699px){
  .peek-i span,.tile .cap{border-radius:12px;padding:5px 9px;font-size:.74rem;line-height:1.25;inset:auto auto 8px 8px;max-width:calc(100% - 16px)}
}
.u-media{background:#fff}
.u-media:has(>.schem){border-bottom:1px solid #EFEFF2}
/* headings inside two-column layouts and cards stay one step smaller */
.prose h2,.split h2,.cov-grid h2,.faq-grid h2{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1}
.mv h2{font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1.1}

/* ================= v7.1: página Módulos (20' y 40', sin baño / medio baño / baño completo) ================= */
.plan{width:94%;max-width:460px;height:auto;display:block;margin:0 auto}
.p-floor{fill:#fff}
.p-bath{fill:#E9F1FA}
.p-wall{fill:none;stroke:#1D1D1F;stroke-width:3;stroke-linejoin:round}
.p-part{stroke:#1D1D1F;stroke-width:2;stroke-linecap:round}
.p-win{fill:#fff;stroke:#1D1D1F;stroke-width:1.1}
.p-gap{fill:#fff}
.p-swing{fill:none;stroke:#8E8E93;stroke-width:1;stroke-dasharray:3 2}
.p-fx{fill:#fff;stroke:#3A3A3C;stroke-width:1.2}
.p-sh{fill:#fff;stroke:#3A3A3C;stroke-width:1.2}
.p-drain{fill:none;stroke:#3A3A3C;stroke-width:1}
.p-lbl{font:600 12px var(--f);fill:#8E8E93;letter-spacing:.04em;text-transform:uppercase}
.mod-media{background:#fff;border-bottom:1px solid #EFEFF2}
.mod-media>div{width:100%;display:flex;align-items:center;justify-content:center}
.mod-media>div[hidden]{display:none}
/* iOS segmented control */
.mseg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#EEEEF0;border-radius:11px;padding:2px;margin:2px 0 10px}
.mseg button{appearance:none;-webkit-tap-highlight-color:transparent;border:0;background:transparent;border-radius:9px;min-height:36px;padding:0 6px;font:600 .86rem/1.15 var(--f);color:#3A3A3C;cursor:pointer;transition:background .15s,box-shadow .15s}
.mseg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
.mseg button:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.mod-inc{margin:0 0 12px;color:var(--ink);font-weight:600;font-size:.98rem}
.mod-inc [hidden]{display:none}
.mod .u-body h3{margin-bottom:12px}
/* bathroom options */
.bath-grid{display:grid;gap:12px;margin-top:24px}
@media(min-width:800px){.bath-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.bath-grid article{background:#fff;border-radius:22px;padding:22px}
.bath-grid .b-ic{width:46px;height:46px;border-radius:14px;background:var(--red-t);color:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.bath-grid .b-ic .ic{width:24px;height:24px}
.bath-grid h3{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;margin:0 0 6px}
.bath-grid p{margin:0;color:var(--gray)}
.bath-all{margin-top:18px;color:var(--gray)}
/* home: four doors */
@media(min-width:640px){.go-grid.go-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.go-grid.go-4{grid-template-columns:repeat(4,1fr);gap:14px}.go-4 .go-body{padding:18px 54px 20px 20px}.go-4 .go-body b{font-size:1.2rem}}
.go-img.go-plan{background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #EFEFF2}
.go-img.go-plan .plan{width:100%;max-width:none}
.mod .mod-media{aspect-ratio:2.1/1!important}
@media(max-width:699px){.mod .mod-media{aspect-ratio:1.9/1!important}.mseg button{font-size:.76rem;min-height:36px;padding:0 2px;white-space:nowrap;letter-spacing:-.01em}}
/* home: "Servicio completo" cards are shortcuts to each page */
.flow li{padding:0;display:block}
.flow-a{display:flex;align-items:center;gap:14px;padding:14px 16px;color:inherit;text-decoration:none;border-radius:inherit;min-height:76px;-webkit-tap-highlight-color:transparent;transition:box-shadow .2s,transform .15s}
.flow-a b{flex:1;align-self:center}
.flow-a .f-ic{flex:none}
.f-go{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--red-t);color:var(--red);flex:none;font-style:normal}
.f-go .ic{width:16px;height:16px}
.flow-a:hover{box-shadow:0 12px 32px rgba(0,0,0,.08)}
.flow-a:active{transform:scale(.98)}
@media(min-width:900px){.flow-a{position:relative;flex-direction:column;align-items:flex-start;padding:22px;min-height:0}.flow-a b{flex:none;align-self:flex-start}.f-go{position:absolute;top:22px;right:22px}}
[id]{scroll-margin-top:84px}
/* v7.3: one card per module option */
.mod-jump{display:flex;gap:8px;margin-top:22px;margin-bottom:-24px}
@media(min-width:900px){.mod-jump{margin-bottom:-40px}}
.mod-jump .chip{display:inline-flex;align-items:center;padding:0 16px;text-decoration:none;color:var(--ink)}
.mod-sub{margin-top:6px}
.mod-sub b{font-weight:700;color:var(--ink)}
.mods{display:grid;gap:14px;margin-top:22px}
@media(min-width:640px){.mods{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.mods{grid-template-columns:repeat(4,1fr)}}
.mod-card .mod-media{aspect-ratio:2.2/1;position:relative}
.mod-card .u-body h3{font-size:1.2rem;margin-bottom:6px}
.mod-card .u-use{margin-bottom:14px}
.mod-card .u-badge .ic{width:14px;height:14px}
.p-dash{stroke:#8E8E93;stroke-width:1.4;stroke-dasharray:4 3}
.p-lbl-red{fill:var(--red)}
.bath-all{margin:0 0 36px;padding:18px 20px;background:#fff;border-radius:18px;color:var(--gray)}
.mod-card .mod-media{aspect-ratio:16/9!important;padding:10px 0}
.mod-card .plan{width:auto;height:84%;max-width:92%;margin:0 auto}
.mod-card .u-actions{grid-template-columns:1fr 1fr}
@media(min-width:1100px){.mod-card .u-actions{grid-template-columns:1fr}.mod-card .u-actions .btn{width:100%}}
.mod-card .u-body{display:flex;flex-direction:column;flex:1}
/* v7.4: modular / maritime catalogue (Jeffrey's table) */
.mod-kind{margin:0 0 4px;font-size:.8rem;font-weight:600;color:var(--red);letter-spacing:.01em}
.spec3{grid-template-columns:repeat(3,1fr)!important;margin-bottom:10px}
.spec3 dd{white-space:nowrap}
.mods-3{}
@media(min-width:1100px){.mods-3{grid-template-columns:repeat(3,1fr)}}
.mod-otro{display:grid;gap:14px;align-items:center;margin-top:14px;background:#fff;border-radius:24px;padding:20px;border:1.5px dashed #D2D2D7}
.mod-otro .b-ic{width:46px;height:46px;border-radius:14px;background:var(--red-t);color:var(--red);display:flex;align-items:center;justify-content:center}
.mod-otro h3{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;margin:0 0 4px}
.mod-otro p{margin:0;color:var(--gray)}
.mo-act{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mo-act .btn{padding:0 14px;font-size:.88rem}
@media(min-width:800px){.mod-otro{grid-template-columns:auto 1fr auto;padding:20px 24px}.mo-act{min-width:300px}}
.spec3 div{grid-column:auto!important}
.mod-jump{flex-wrap:wrap}
@media(max-width:420px){.mod-jump .chip{padding:0 12px;font-size:.85rem}}
/* v7.5: cards show only group, size and office */
.mod-card .mod-media{aspect-ratio:2/1!important;padding:14px 0}
.mod-card .plan{height:80%;max-width:90%}
.mod-card .u-body h3{margin-bottom:16px}
.go-img.go-plan .plan{width:auto;height:62%;max-width:86%}
.mod-card .mod-media{aspect-ratio:16/9!important}
/* v7.9: Contenedores page: card that leads to Módulos */
.mod-promo{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;margin-top:18px;padding:20px;background:#fff;border-radius:24px;color:inherit;text-decoration:none;transition:box-shadow .2s}
.mod-promo:hover{box-shadow:0 12px 32px rgba(0,0,0,.08)}
.mp-img{display:flex;align-items:center;justify-content:center;background:#F5F5F7;border-radius:16px;padding:14px;height:120px}
.mp-img .plan{height:100%;width:auto;max-width:100%}
.mp-txt b{display:block;font-size:1.3rem;font-weight:700;letter-spacing:-.015em;margin-bottom:4px}
.mp-txt span{color:var(--gray)}
.mp-btn{justify-self:start}
.mp-btn .ic{width:16px;height:16px;margin-left:6px}
@media(min-width:800px){.mod-promo{grid-template-columns:220px 1fr auto;padding:20px 24px}.mp-btn{justify-self:end}}
/* v8.0: floor plans per Jeffrey's spec */
.pl-lbl{font:600 13px var(--f);letter-spacing:1px;fill:#8a8a8e;text-transform:uppercase}
.pl-red{fill:var(--red)}
.mod-card .plan2{height:88%;width:auto;max-width:92%}
.go-img.go-plan .plan2{height:74%;width:auto;max-width:90%}