:root{
  --cream:#F0F3F4;
  --ink:#0A171D;
  --teal:#255669;
  --abyss:#0F2C3A;
  --mist:#56849B;
  --line: rgba(10,23,29,0.16);
  --line-strong: rgba(10,23,29,0.55);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1400px; margin:0 auto; padding:0 32px;}

h1,h2,h3,.disp{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:0.92;
  font-weight:800;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--teal);
  font-weight:500;
}
.eyebrow::before{
  content:'';
  width:18px; height:2px;
  background:var(--teal);
  display:inline-block;
}

/* ---------- tick ruler edges ---------- */
.ruler{
  position:fixed;
  top:0; bottom:0;
  width:18px;
  z-index:40;
  background-image: repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 40px);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.ruler.left{left:0;}
.ruler.right{right:0;}
@media (max-width:900px){ .ruler{display:none;} }

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(240,243,244,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1.5px solid var(--ink);
}
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 32px;
  max-width:1400px; margin:0 auto;
}
.brand{display:block; line-height:0;}
.brand img{height:84px; width:auto; display:block;}
.foot-brand .brand img{height:142px;}
@media (max-width:900px){
  .brand img{height:60px;}
  .foot-brand .brand img{height:90px;}
}
@media (max-width:480px){
  .brand img{height:48px;}
  .foot-brand .brand img{height:64px;}
}
nav.links{display:flex; gap:28px; font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;}
nav.links a{position:relative; padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .15s;}
nav.links a:hover{border-color:var(--teal); color:var(--teal);}
nav.links a.active{color:var(--teal); border-color:var(--teal);}
.cta-btn{
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink); color:var(--cream);
  padding:11px 18px;
  border:1.5px solid var(--ink);
  display:inline-flex; align-items:center; gap:8px;
  transition:background .15s, color .15s;
}
.cta-btn:hover{background:var(--teal); border-color:var(--teal);}
.cta-btn.ghost{background:transparent; color:var(--ink);}
.cta-btn.ghost:hover{background:var(--ink); color:var(--cream);}
@media (max-width:900px){ nav.links{display:none;} }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1.5px solid var(--ink);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero .grid-canvas{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero .hero-grid{position:relative; z-index:1;}
.hero-grid{
  max-width:1400px; margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height:calc(100vh - 66px);
}
.hero-left{
  padding:64px 32px 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  border-right:1.5px solid var(--ink);
}
.hero-h1{
  font-size:clamp(52px, 8.4vw, 118px);
  color:var(--ink);
}
.hero-h1 em{font-style:normal; color:var(--teal);}
.hero-sub{
  max-width:480px;
  font-size:17px;
  margin-top:22px;
  color:var(--abyss);
}
.hero-cta-row{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-titleblock{
  margin-top:48px;
  border-top:1.5px solid var(--ink);
  padding-top:16px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.03em;
}
.hero-titleblock div b{display:block; font-size:10px; color:var(--teal); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; font-weight:600;}
.hero-right{position:relative; overflow:hidden;}
.hero-right img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-tag{
  position:absolute; left:20px; top:20px;
  background:var(--cream); border:1.5px solid var(--ink);
  padding:6px 12px;
  font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
}
.hero-tag b{color:var(--teal);}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-left{border-right:none; border-bottom:1.5px solid var(--ink); padding:44px 20px 32px;}
  .hero-right{height:340px;}
  .hero-titleblock{grid-template-columns:repeat(2,1fr);}
}

/* ---------- marquee ---------- */
.marquee-wrap{
  background:var(--ink); color:var(--cream);
  border-bottom:1.5px solid var(--ink);
  overflow:hidden;
  white-space:nowrap;
  padding:13px 0;
}
.marquee-track{display:flex; width:max-content; animation:scroll 32s linear infinite;}
.marquee-track span{
  font-family:'IBM Plex Mono'; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:0 22px; display:flex; flex:none; align-items:center; gap:22px;
}
.marquee-track span::after{content:'◆'; color:var(--mist); font-size:8px;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- section shell ---------- */
section{border-bottom:1.5px solid var(--ink);}
.section-pad{padding:88px 32px;}
@media (max-width:900px){ .section-pad{padding:56px 20px;} }

/* ---------- manifesto ---------- */
.manifesto{background:var(--cream);}
.manifesto .wrap{display:grid; grid-template-columns:1fr; gap:36px;}
.manifesto-quote{
  font-size:clamp(30px, 4.6vw, 58px);
  max-width:1000px;
  color:var(--abyss);
}
.manifesto-quote b{color:var(--teal); font-weight:800;}
.manifesto-cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1.5px solid var(--ink);
  margin-top:12px;
}
.manifesto-cols div{padding:22px 26px; border-right:1px solid var(--line);}
.manifesto-cols div:last-child{border-right:none;}
.manifesto-cols h4{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:8px; font-weight:600;}
.manifesto-cols p{font-size:14px; color:var(--abyss); line-height:1.65;}
@media (max-width:900px){ .manifesto-cols{grid-template-columns:1fr;} .manifesto-cols div{border-right:none; border-bottom:1px solid var(--line);} }

/* ---------- catalog bento grid ---------- */
.cat-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:36px;}
.cat-head h2{font-size:clamp(38px,5.2vw,72px);}
.cat-head p{max-width:340px; font-size:14px; color:var(--abyss);}

/* ---------- tiers (como trabajamos) ---------- */
.tiers-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:1.5px solid var(--ink); border-left:1.5px solid var(--ink);}
.tiers-grid .cell{min-height:300px;}
.tier-cta{
  margin-top:18px; font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  border-bottom:1px solid currentColor; align-self:flex-start; padding-bottom:2px; display:inline-block; transition:opacity .15s;
}
.tier-cta:hover{opacity:0.7;}
@media (max-width:900px){ .tiers-grid{grid-template-columns:1fr;} }

.bento{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 110px);
  grid-template-areas:
    "round round round sizes sizes sizes"
    "round round round sizes sizes sizes"
    "round round round two   two   two"
    "round round round two   two   two"
    "custom custom toilet toilet galpon galpon"
    "custom custom toilet toilet galpon galpon";
  gap:0;
  border-top:1.5px solid var(--ink);
  border-left:1.5px solid var(--ink);
}
.cell{
  border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  position:relative;
  padding:26px;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  background:var(--cream);
}
.cell.dark{background:var(--ink); color:var(--cream);}
.cell-clickable{cursor:pointer; transition:opacity .15s;}
.cell-clickable:hover{opacity:0.88;}
.cell-clickable:focus-visible{outline:2px solid var(--teal); outline-offset:-2px;}
.cell.teal{background:var(--teal); color:var(--cream);}
.cell .num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--teal); letter-spacing:.08em;}
.cell.dark .num, .cell.teal .num{color:var(--mist);}
.cell h3{font-size:clamp(24px,2.4vw,34px); margin-top:10px;}
.cell p.desc{font-size:13.5px; margin-top:10px; max-width:34ch; color:var(--abyss);}
.cell.dark p.desc, .cell.teal p.desc{color:rgba(240,243,244,0.82);}
.cell .imgwrap{position:absolute; inset:0; z-index:0;}
.cell .imgwrap img{width:100%; height:100%; object-fit:cover;}
.cell .imgwrap::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,23,29,0) 30%, rgba(10,23,29,0.82) 100%);}
.cell.photo{color:var(--cream);}
.cell.photo .num, .cell.photo p.desc{color:rgba(240,243,244,0.85);}
.cell .content{position:relative; z-index:1;}
.spec-tag{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.05em;
  border:1px solid currentColor; padding:3px 8px; display:inline-block; margin-top:12px;
}

.c-round{ grid-area:round; }
.c-round-sizes{ grid-area:sizes; }
.c-twostory{ grid-area:two; }
.c-custom{ grid-area:custom; }
.c-toilet{ grid-area:toilet; }
.c-galpon{ grid-area:galpon; }

@media (max-width:900px){
  .bento{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-template-areas:
      "round"
      "sizes"
      "two"
      "custom"
      "toilet"
      "galpon";
  }
  .c-round,.c-round-sizes,.c-twostory,.c-custom,.c-toilet,.c-galpon{min-height:320px;}
}

/* size chips row inside round house cell */
.size-row{display:flex; gap:0; position:relative; z-index:1; margin-top:14px; border-top:1px solid rgba(240,243,244,0.3);}
.size-chip{flex:1; padding:10px 0 0; }
.size-chip b{display:block; font-family:'IBM Plex Mono'; font-size:16px;}
.size-chip span{font-size:10.5px; opacity:.75; font-family:'IBM Plex Mono';}

/* ---------- accordion (product detail + specs) ---------- */
.mono-label{
  display:block; font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); margin-bottom:14px;
}
.product-detail{border-top:1.5px solid var(--ink); margin-top:56px; padding-top:36px; scroll-margin-top:90px;}
.accordion{border-top:1.5px solid var(--ink);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-trigger{
  width:100%; display:flex; align-items:center; gap:18px; padding:20px 2px;
  background:none; border:none; cursor:pointer; text-align:left; font:inherit; color:var(--ink);
}
.acc-num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--teal); letter-spacing:.08em; flex:none; width:26px;}
.acc-title{font-family:'Big Shoulders Display'; font-weight:800; font-size:clamp(19px,2.3vw,28px); text-transform:uppercase; flex:1; line-height:1;}
.acc-icon{font-family:'IBM Plex Mono'; font-size:20px; line-height:1; color:var(--teal); flex:none; transition:transform .2s ease;}
.acc-item.open .acc-icon{transform:rotate(45deg);}
.acc-panel{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.acc-item.open .acc-panel{max-height:640px;}
.acc-panel-inner{padding:0 2px 28px 44px;}
.acc-panel-inner p{font-size:14px; color:var(--abyss); line-height:1.7; max-width:66ch;}
.acc-panel-inner p.acc-pending{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--teal); margin-bottom:14px;}
.acc-specs{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.acc-specs span{font-family:'IBM Plex Mono'; font-size:11px; border:1px solid var(--ink); padding:5px 10px;}
.spec-accordion .acc-panel-inner table.spectable{margin-top:0; max-width:520px;}

/* spec-accordion: horizontal "fan" layout on desktop — columns side by side,
   the open one expands; each column keeps a fixed vertical-label spine. */
@media (min-width:901px){
  .spec-accordion{display:flex; border-top:1.5px solid var(--ink); border-left:1.5px solid var(--ink); align-items:stretch;}
  .spec-accordion .acc-item{
    position:relative; border-bottom:none; border-right:1.5px solid var(--ink);
    flex:0 0 68px; min-height:480px; overflow:hidden; background:var(--cream);
    transition:flex-basis .4s ease, background .2s ease;
  }
  .spec-accordion .acc-item:not(.open):hover{background:rgba(37,86,105,0.06);}
  .spec-accordion .acc-item.open{flex:1 1 600px;}
  .spec-accordion .acc-trigger{
    position:absolute; inset:0 auto 0 0; width:68px; height:100%; z-index:2;
    flex-direction:column; align-items:center; justify-content:flex-start; gap:18px;
    padding:24px 0 0; border-right:1px solid var(--line); background:transparent;
  }
  .spec-accordion .acc-title{
    writing-mode:vertical-rl; transform:rotate(180deg);
    white-space:nowrap; font-size:20px; font-weight:800;
  }
  .spec-accordion .acc-icon{display:none;}
  .spec-accordion .acc-item.open .acc-num,
  .spec-accordion .acc-item.open .acc-title{color:var(--teal);}
  .spec-accordion .acc-panel{
    position:absolute; left:68px; right:0; top:0; bottom:0; max-height:none;
    opacity:0; overflow-y:auto; transition:opacity .25s ease;
  }
  .spec-accordion .acc-item.open .acc-panel{opacity:1;}
  .spec-accordion .acc-panel-inner{padding:26px 26px 26px 22px;}
}

@media (prefers-reduced-motion: reduce){ .acc-panel{transition:none;} .acc-icon{transition:none;} .spec-accordion .acc-item{transition:none;} .spec-accordion .acc-panel{transition:none;} }
@media (max-width:600px){ .acc-title{font-size:18px;} .acc-panel-inner{padding-left:26px;} }

/* ---------- process ---------- */
.process{
  position:relative; overflow:hidden;
  background:var(--abyss); color:var(--cream);
  background-image:
    linear-gradient(rgba(240,243,244,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,243,244,0.07) 1px, transparent 1px);
  background-size:48px 48px;
}
.process .grid-canvas{position:absolute; inset:0; z-index:0; pointer-events:none;}
.process .wrap{position:relative; z-index:1;}
.process .eyebrow{color:var(--mist);}
.process .eyebrow::before{background:var(--mist);}
.process h2{color:var(--cream); font-size:clamp(38px,5vw,68px); max-width:900px;}
.process-stat{
  font-family:'Big Shoulders Display'; font-weight:900;
  font-size:clamp(30px,4.2vw,58px);
  color:var(--mist);
  margin:26px 0 40px;
  letter-spacing:-0.01em;
}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(240,243,244,0.25);}
.pstep{padding:24px 22px; border-right:1px solid rgba(240,243,244,0.25);}
.pstep:last-child{border-right:none;}
.pstep .n{font-family:'IBM Plex Mono'; font-size:12px; color:var(--mist); letter-spacing:.1em;}
.pstep h4{font-family:'Big Shoulders Display'; font-weight:700; font-size:20px; text-transform:uppercase; margin:8px 0 8px;}
.pstep p{font-size:13px; color:rgba(240,243,244,0.75); line-height:1.6;}
.process-photos{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5px; margin-top:44px; border:1px solid rgba(240,243,244,0.25);}
.process-photos img{width:100%; height:340px; object-fit:cover;}
@media (max-width:900px){ .process-grid{grid-template-columns:1fr;} .pstep{border-right:none; border-bottom:1px solid rgba(240,243,244,0.25);} .process-photos{grid-template-columns:1fr;} .process-photos img{height:240px;} }

/* ---------- materials / specs ---------- */
.materials .wrap.mat-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1.5px solid var(--ink);}
.mat-left{padding:44px 40px 44px 0; border-right:1.5px solid var(--ink);}
.mat-right{padding:44px 0 44px 40px;}
.mat-left h2{font-size:clamp(34px,4vw,54px); margin-bottom:18px;}
.matlist{margin-top:20px;}
.matlist .row{display:grid; grid-template-columns:28px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line);}
.matlist .row:first-child{border-top:none;}
.matlist .row b{font-family:'IBM Plex Mono'; font-size:12px; color:var(--teal);}
.matlist .row span{font-size:13.5px; color:var(--abyss);}
.matlist .row .label{font-weight:600; color:var(--ink); display:block; margin-bottom:2px; font-size:14px;}
.spectable{width:100%; border-collapse:collapse; font-family:'IBM Plex Mono'; font-size:11.5px;}
.spectable caption{text-align:left; font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:12px;}
.spectable th, .spectable td{border:1px solid var(--line-strong); padding:9px 10px; text-align:left;}
.spectable th{background:var(--ink); color:var(--cream); font-weight:500; letter-spacing:.04em;}
.spectable td.model{font-weight:600; background:rgba(37,86,105,0.08);}
.diagram-img{margin-top:26px; border:1.5px solid var(--ink);}
.adv-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:24px; border-top:1px solid var(--line);}
.adv-grid div{padding:16px 18px 16px 0; border-bottom:1px solid var(--line);}
.adv-grid div:nth-child(odd){padding-right:18px; border-right:1px solid var(--line);}
.adv-grid div:nth-child(even){padding-left:18px;}
.adv-grid h5{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); margin-bottom:6px; font-weight:600;}
.adv-grid p{font-size:12.5px; color:var(--abyss); line-height:1.55;}
.mat-photos{margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mat-photos img{height:190px; object-fit:cover; border:1.5px solid var(--ink);}
@media (max-width:900px){ .materials .wrap.mat-grid{grid-template-columns:1fr;} .mat-left{border-right:none; border-bottom:1.5px solid var(--ink); padding:40px 0;} .mat-right{padding:40px 0;} .mat-photos img{height:150px;} }

/* ---------- applications ---------- */
.apps h2{font-size:clamp(38px,5.2vw,72px); margin-bottom:30px;}
.app-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1.5px solid var(--ink); border-left:1.5px solid var(--ink);
}
.app-cell{border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); position:relative; height:260px; overflow:hidden;}
.app-cell img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.app-cell:hover img{transform:scale(1.06);}
.app-cell .lbl{position:absolute; left:0; bottom:0; right:0; background:rgba(10,23,29,0.88); color:var(--cream); font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:9px 12px;}
.app-grid-3{grid-template-columns:repeat(3,1fr);}
.app-strip-label{padding:36px 32px 16px;}
.section-pad + .app-strip-label{padding-top:0;}
.app-tags{display:flex; gap:10px; flex-wrap:wrap; padding:16px 32px 40px;}
@media (max-width:900px){ .app-grid{grid-template-columns:repeat(2,1fr);} .app-grid-3{grid-template-columns:repeat(2,1fr);} .app-cell{height:180px;} }

/* ---------- target cursor (catalogo) ---------- */
.cursor-none, .cursor-none *{cursor:none !important;}
.target-cursor-wrapper{
  position:fixed; top:0; left:0; width:0; height:0;
  pointer-events:none; z-index:9999; mix-blend-mode:difference;
  opacity:0; transition:opacity .15s ease;
}
.target-cursor-wrapper.is-visible{opacity:1;}
.target-cursor-dot{position:absolute; left:-2px; top:-2px; width:4px; height:4px; background:#fff; border-radius:50%;}
.target-cursor-corner{position:absolute; left:0; top:0; width:12px; height:12px; border:2px solid #fff; transition:transform .2s ease;}
.corner-tl{border-right:none; border-bottom:none;}
.corner-tr{border-left:none; border-bottom:none;}
.corner-br{border-left:none; border-top:none;}
.corner-bl{border-right:none; border-top:none;}

/* ---------- inner-page header band ---------- */
.page-header{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--cream);
  border-bottom:1.5px solid var(--ink);
  background-image:
    linear-gradient(rgba(240,243,244,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,243,244,0.07) 1px, transparent 1px);
  background-size:48px 48px;
}
.page-header .grid-canvas{position:absolute; inset:0; z-index:0; pointer-events:none;}
.page-header .wrap{position:relative; z-index:1; padding:64px 32px 48px;}
.page-header .eyebrow{color:var(--mist);}
.page-header .eyebrow::before{background:var(--mist);}
.page-header h1{color:var(--cream); font-size:clamp(40px,6vw,84px);}
.page-header p{font-family:'IBM Plex Mono'; font-size:13px; color:rgba(240,243,244,.72); max-width:60ch; margin-top:16px; text-transform:none; letter-spacing:.02em; line-height:1.7;}
@media (max-width:900px){ .page-header .wrap{padding:48px 20px 36px;} }

/* ---------- catalog preview (home) ---------- */
.preview-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1.5px solid var(--ink); border-left:1.5px solid var(--ink);
}
a.app-cell{display:block;}
@media (max-width:900px){ .preview-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- final CTA banner ---------- */
.final-cta{background:var(--abyss); color:var(--cream); text-align:center;}
.final-cta h2{color:var(--cream); font-size:clamp(34px,5vw,64px);}
.final-cta p{font-family:'IBM Plex Mono'; font-size:13px; color:var(--mist); max-width:52ch; margin:16px auto 30px; letter-spacing:.02em; text-transform:none;}
.final-cta .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- contact map + social ---------- */
.contact-map-row{display:grid; grid-template-columns:1.4fr 1fr; border-top:1.5px solid var(--ink);}
.contact-map{width:100%; height:320px; border:none; display:block; filter:grayscale(.35) contrast(1.05);}
.contact-social{padding:34px 40px; display:flex; flex-direction:column; justify-content:center; border-left:1.5px solid var(--ink);}
.social-links{display:flex; gap:18px; margin-top:10px; flex-wrap:wrap;}
.social-links a{font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--ink); padding-bottom:2px;}
.social-links a:hover{color:var(--teal); border-color:var(--teal);}
@media (max-width:900px){ .contact-map-row{grid-template-columns:1fr;} .contact-social{border-left:none; border-top:1.5px solid var(--ink);} .contact-map{height:240px;} }

/* ---------- photo row (nosotros) ---------- */
.photo-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:30px;}
.photo-row-3 img{height:230px; object-fit:cover; border:1.5px solid var(--ink); width:100%;}
@media (max-width:900px){ .photo-row-3{grid-template-columns:1fr;} .photo-row-3 img{height:200px;} }

/* ---------- footer ---------- */
footer{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--cream); border-bottom:none;
  background-image:
    linear-gradient(rgba(240,243,244,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,243,244,0.045) 1px, transparent 1px);
  background-size:48px 48px;
}
footer .grid-canvas{position:absolute; inset:0; z-index:0; pointer-events:none;}
footer .wrap{position:relative; z-index:1;}
.foot-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(240,243,244,0.22);}
.foot-brand .brand .b1{color:var(--cream);}
.foot-brand .brand .b2{color:var(--mist);}
.foot-brand p{font-size:13.5px; color:rgba(240,243,244,0.7); margin-top:16px; max-width:34ch; line-height:1.6;}
.foot-col h5{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); margin-bottom:14px;}
.foot-col a, .foot-col p{display:block; font-size:14px; color:rgba(240,243,244,0.85); margin-bottom:8px;}
.foot-big{padding:40px 0 14px;}
.foot-big img{width:clamp(280px,44vw,640px); height:auto; display:block;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding:20px 0 36px; font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.05em; color:rgba(240,243,244,0.55); flex-wrap:wrap; gap:10px;}
@media (max-width:900px){ .foot-top{grid-template-columns:1fr 1fr; gap:30px 20px;} }

/* focus visibility */
a:focus-visible, button:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
  .app-cell img{transition:none;}
  .grid-canvas{display:none;}
}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:var(--teal); border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(10,23,29,0.35);
  transition:transform .15s ease, background .15s ease;
}
.wa-float:hover{background:var(--ink); transform:translateY(-2px) scale(1.04);}
.wa-float svg{width:28px; height:28px; fill:var(--cream);}
@media (max-width:900px){ .wa-float{right:16px; bottom:16px; width:52px; height:52px;} .wa-float svg{width:25px; height:25px;} }

/* ---------- contact ---------- */
.contact{background:var(--cream);}
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; border-top:1.5px solid var(--ink);}
.contact-info{padding:44px 40px 44px 0; border-right:1.5px solid var(--ink);}
.contact-info h2{font-size:clamp(34px,4vw,54px);}
.contact-list{margin-top:28px;}
.contact-item{display:grid; grid-template-columns:100px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line); font-size:14px;}
.contact-item:first-child{border-top:none;}
.contact-item b{font-family:'IBM Plex Mono'; font-size:11px; color:var(--teal); text-transform:uppercase; letter-spacing:.06em; font-weight:600;}
.contact-item span{color:var(--abyss);}
a.contact-item span{transition:color .15s;}
a.contact-item:hover span{color:var(--teal);}
.contact-form{padding:44px 0 44px 40px; display:flex; flex-direction:column; gap:16px;}
.f-row{display:flex; flex-direction:column; gap:6px;}
.f-row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.f-row label{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); font-weight:600;}
.f-row input, .f-row select, .f-row textarea{
  font-family:'IBM Plex Sans'; font-size:14px; color:var(--ink);
  background:var(--cream); border:1.5px solid var(--ink); padding:11px 12px; resize:vertical;
}
.f-row input:focus, .f-row select:focus, .f-row textarea:focus{outline:2px solid var(--teal); outline-offset:1px;}
.contact-form button{align-self:flex-start; border:none; cursor:pointer; font-size:12px;}
.f-status{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.04em; min-height:16px;}
.f-status.ok{color:var(--teal);}
.f-status.err{color:#B23B3B;}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-info{border-right:none; border-bottom:1.5px solid var(--ink); padding:36px 0;}
  .contact-form{padding:36px 0;}
  .f-row-2{grid-template-columns:1fr;}
}