:root{
  --petroleo:#24393C; --petroleo-osc:#1A2B2E; --rojo:#5E1F10; --ocre:#8A5F1B;
  --grafito:#12181A; --arena:#EFEAE3; --blanco:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',system-ui,sans-serif;color:var(--grafito);background:var(--arena);line-height:1.6;font-size:17px}
h1,h2,h3,.volanta{font-family:'Outfit',sans-serif}
.volanta{text-transform:uppercase;letter-spacing:.22em;font-size:.76rem;font-weight:500}
.contenedor{max-width:1100px;margin:0 auto;padding:0 24px}
.banda-demo{background:var(--ocre);color:#fff;text-align:center;font-size:.8rem;padding:6px 12px;font-family:'Outfit',sans-serif;letter-spacing:.06em}

/* BARRA / NAV CON DESPLEGABLES */
.barra{background:var(--petroleo);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.12)}
.barra .contenedor{display:flex;align-items:center;justify-content:space-between;padding-top:13px;padding-bottom:13px;gap:16px}
.lockup{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.lockup .marca{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:.04em}
.lockup .marca .diag{display:inline-block;width:.58em;height:1em;vertical-align:-.12em;margin:0 .09em;
  background:linear-gradient(123.7deg,transparent 43.5%,rgba(255,255,255,.95) 43.5%,rgba(255,255,255,.95) 56.5%,transparent 56.5%)}
.lockup .descriptor{font-family:'Outfit',sans-serif;font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;line-height:1.5;border-left:1px solid rgba(255,255,255,.5);padding-left:12px;color:#fff}
.lockup .descriptor .loc{color:rgba(255,255,255,.75)}

.menu-top{display:flex;gap:22px;font-family:'Outfit',sans-serif;font-size:.88rem}
.menu-top .item{position:relative}
.menu-top .item > a{color:rgba(255,255,255,.85);text-decoration:none;display:inline-flex;align-items:center;gap:5px;padding:8px 0}
.menu-top .item > a:hover{color:#fff}
.menu-top .item > a .caret{font-size:.65em;opacity:.7}
.menu-top .item.activo > a{color:#fff}

.submenu{display:none;position:absolute;top:100%;left:-16px;background:var(--petroleo-osc);min-width:230px;padding:8px 0;border-radius:4px;box-shadow:0 12px 28px rgba(10,18,19,.45);z-index:60}
.menu-top .item:hover .submenu,
.menu-top .item.abierto .submenu{display:block}
.submenu a{display:block;padding:9px 18px;color:rgba(255,255,255,.85);text-decoration:none;font-size:.85rem;white-space:nowrap}
.submenu a:hover{background:rgba(255,255,255,.08);color:#fff}
.submenu .ver-todo{border-top:1px solid rgba(255,255,255,.12);margin-top:4px;padding-top:10px;color:rgba(255,255,255,.6);font-size:.78rem}

.cta{display:inline-block;border:none;cursor:pointer;font-family:'Outfit',sans-serif;font-weight:600;font-size:1rem;background:var(--blanco);color:var(--petroleo);padding:14px 28px;border-radius:3px;text-decoration:none;transition:background .15s}
.cta:hover{background:#e8e2d8}
.cta.rojo{background:var(--rojo);color:#fff}
.cta.rojo:hover{background:#4a180c}
.cta.mini{padding:9px 18px;font-size:.85rem}

/* HERO (home) */
.hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;color:#fff;
  background-size:cover;background-position:center}
.hero .contenedor{padding-bottom:44px;padding-top:150px;text-shadow:0 1px 14px rgba(10,18,19,.55)}
.hero .volanta{color:rgba(255,255,255,.8);margin-bottom:16px}
.hero h1{font-size:clamp(2.1rem,5.5vw,3.6rem);font-weight:600;line-height:1.1;max-width:760px;margin-bottom:20px}
.hero p{font-size:clamp(1.05rem,2.2vw,1.25rem);color:rgba(255,255,255,.95);max-width:620px;margin-bottom:32px}
.hero .aclara{display:block;margin-top:14px;font-size:.9rem;color:rgba(255,255,255,.82)}

/* CABECERA DE PÁGINA INTERNA (sector individual) */
.hero-pagina{position:relative;min-height:42vh;display:flex;align-items:flex-end;color:#fff;
  background-size:cover;background-position:center}
.hero-pagina .contenedor{padding-bottom:40px;padding-top:80px}
.hero-pagina .volanta{color:rgba(255,255,255,.8);margin-bottom:12px}
.hero-pagina h1{font-size:clamp(1.8rem,4.5vw,2.8rem);font-weight:600;line-height:1.15;max-width:760px}

/* SECTORES (usado en home como resumen, y como listado dentro de cada página) */
.sectores{padding:70px 0 30px}
.encabezado{max-width:660px;margin-bottom:46px}
.encabezado .volanta{color:var(--rojo);margin-bottom:12px}
.encabezado h2{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:600;line-height:1.2}
.encabezado p{margin-top:12px;color:#3d4547}

.sector{display:grid;grid-template-columns:1.15fr 1fr;border-radius:6px;overflow:hidden;background:#fff;border:1px solid rgba(18,24,26,.08);margin-bottom:34px;min-height:420px;scroll-margin-top:84px}
.sector.par{grid-template-columns:1fr 1.15fr}
.sector.par .sector-foto{order:2}
.sector-foto{position:relative;min-height:300px;background-size:cover;background-position:center}
.sector-info{padding:42px 40px;display:flex;flex-direction:column;gap:14px}
.sector-info .volanta{color:var(--ocre)}
.sector-info h3{font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:600;color:var(--petroleo);line-height:1.2}
.sector-info p{font-size:.96rem;color:#3d4547}
.opciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.opcion{display:flex;align-items:center;gap:8px;background:var(--arena);border-radius:999px;padding:6px 14px 6px 6px;font-family:'Outfit',sans-serif;font-size:.8rem;font-weight:500;color:var(--petroleo);text-decoration:none;scroll-margin-top:84px}
.opcion .mini-foto{width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0}
.sector-info .pie{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sector-info .pie .nota{font-size:.8rem;color:#7a8284}

/* Bloque de detalle por material, dentro de la página de cada sector */
.materiales{padding:20px 0 60px}
.material{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:center;padding:36px 0;border-top:1px solid rgba(18,24,26,.1);scroll-margin-top:84px}
.material-foto{width:100%;aspect-ratio:4/3;border-radius:8px;background-size:cover;background-position:center}
.material h3{color:var(--petroleo);font-size:1.3rem;margin-bottom:8px}
.material p{color:#3d4547;font-size:.95rem}
.material .ficha{display:inline-block;margin-top:12px;font-size:.85rem;color:var(--rojo);text-decoration:none;font-weight:600}
@media(max-width:700px){.material{grid-template-columns:1fr}}

/* CÓMO */
.como{background:var(--petroleo);color:#fff;padding:76px 0}
.como .encabezado .volanta{color:rgba(255,255,255,.6)}
.como .encabezado h2{color:#fff}
.como .encabezado p{color:rgba(255,255,255,.8)}
.como .grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.paso{border-top:2px solid rgba(255,255,255,.3);padding-top:16px}
.paso .num{font-family:'Outfit',sans-serif;font-weight:300;font-size:1.8rem;color:rgba(255,255,255,.5)}
.paso h3{font-size:1.05rem;font-weight:600;margin:6px 0}
.paso p{font-size:.9rem;color:rgba(255,255,255,.8)}

/* QUIENES SOMOS */
.quienes-somos{background:#fff;padding:70px 0;scroll-margin-top:84px}

/* OBRAS */
.obras{padding:76px 0;scroll-margin-top:84px}
.obras .marco{border:1px dashed rgba(18,24,26,.3);border-radius:6px;padding:46px 30px;text-align:center;color:#7a8284;background:#fff}
.obras .marco strong{color:var(--petroleo);font-family:'Outfit',sans-serif}
.galeria-obras{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;margin-top:8px}
.obra-item{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(18,24,26,.08)}
.obra-doble{display:grid;grid-template-columns:1fr 1fr}
.obra-foto{position:relative;min-height:260px;background-size:cover;background-position:center}
.obra-foto-simple{min-height:100%}
.obra-item.obra-doble{grid-template-rows:auto auto}
.obra-tag{position:absolute;top:12px;left:12px;background:var(--petroleo);color:#fff;font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.obra-caption{grid-column:1 / -1;padding:14px 18px;font-size:.86rem;color:#3d4547}
.obra-item:not(.obra-doble){display:flex;flex-direction:column}
@media (max-width:760px){.galeria-obras{grid-template-columns:1fr}}

/* CIERRE */
.cierre{background:linear-gradient(180deg, rgba(26,43,46,.94), rgba(26,43,46,.96));background-size:cover;background-position:center;color:#fff;padding:90px 0;text-align:center}
.cierre h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:600;max-width:680px;margin:0 auto 16px;line-height:1.2}
.cierre p{color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 32px}

footer{background:var(--petroleo-osc);color:rgba(255,255,255,.7);padding:34px 0;font-size:.85rem}
footer .contenedor{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:#fff;text-decoration:none}

.wsp{position:fixed;right:22px;bottom:22px;z-index:60;background:var(--rojo);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem;padding:13px 20px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(10,18,19,.35)}
.wsp:hover{background:#4a180c}

@media(max-width:860px){
  .sector, .sector.par{grid-template-columns:1fr}
  .sector.par .sector-foto{order:0}
  .sector-foto{min-height:240px}
  .como .grilla{grid-template-columns:1fr}
  .menu-top{display:none}
  .hero{min-height:64vh}
  .hero-pagina{min-height:34vh}
}


/* --- menu mobile (23/08) --- */
.hamb{display:none;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:4px;padding:8px 11px;font-size:1.05rem;line-height:1;cursor:pointer}
.hamb:focus-visible{outline:2px solid #EFEAE3;outline-offset:2px}
@media (max-width:900px){
  .hamb{display:block}
  header.barra .contenedor{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  nav.menu-top{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 10px}
  nav.menu-top.abierto{display:flex}
  nav.menu-top .item{width:100%;position:static}
  nav.menu-top .item>a{display:block;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.12);font-size:1rem}
  nav.menu-top .submenu{position:static;display:none;box-shadow:none;background:rgba(255,255,255,.06);border-radius:0;min-width:0;padding:4px 0}
  nav.menu-top .item.desplegado .submenu{display:block}
  nav.menu-top .submenu a{padding:11px 16px;font-size:.95rem}
}

/* boton de WhatsApp con isotipo (23/08) */
.cta.wsp-btn{display:inline-flex;align-items:center;gap:11px}
.cta.wsp-btn .ico-wsp{width:22px;height:22px;flex:none;display:block}

/* --- fichas de piso desplegables (23/08) --- */
.material.acordeon{display:block;padding:0;border:1px solid rgba(18,24,26,.10);border-radius:6px;background:#fff;margin-bottom:16px;overflow:hidden}
.material-cab{width:100%;display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:20px;
  background:none;border:0;padding:14px 18px 14px 14px;cursor:pointer;text-align:left;font:inherit}
.material-cab:hover{background:rgba(36,57,60,.035)}
.material-cab:focus-visible{outline:2px solid var(--rojo);outline-offset:-2px}
.material-cab .material-foto{display:block;height:88px;border-radius:4px;background-size:cover;background-position:center}
.material-tit h3{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:600;color:var(--petroleo);margin:0}
.material-tit p{margin:5px 0 0;color:#4a5457;font-size:.94rem;max-width:60ch}
.material-mas{position:relative;width:26px;height:26px;justify-self:center;border-radius:50%;background:rgba(36,57,60,.08)}
.material-mas::before,.material-mas::after{content:'';position:absolute;left:50%;top:50%;background:var(--petroleo);transform:translate(-50%,-50%)}
.material-mas::before{width:12px;height:2px}
.material-mas::after{width:2px;height:12px;transition:transform .18s ease}
.material.abierto .material-mas::after{transform:translate(-50%,-50%) scaleY(0)}
.material-det{padding:4px 22px 24px 148px;border-top:1px solid rgba(18,24,26,.07)}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 26px;margin:18px 0 24px}
.datos .dato{border-left:2px solid rgba(126,46,24,.35);padding-left:12px}
.datos dt{font-family:'Outfit',sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ocre)}
.datos dd{margin:4px 0 0;color:#33393b;font-size:.95rem;line-height:1.45}
.sub-colores{font-family:'Outfit',sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ocre);margin-bottom:12px}
.colores{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:6px}
.color{margin:0;width:104px}
.color .chip{display:block;height:104px;border-radius:4px;background-size:cover;background-position:center;border:1px solid rgba(18,24,26,.12)}
.color-sin-foto .chip{background:linear-gradient(135deg,#e8e0d4,#cdbfa9)}
.color figcaption{margin-top:7px;font-size:.85rem;color:#4a5457;line-height:1.25}
.nota-colores{font-size:.85rem;color:#7a8284;margin:10px 0 0}
.material-det .ficha{display:inline-block;margin-top:20px}
@media(max-width:760px){
  .material-cab{grid-template-columns:78px 1fr 30px;gap:13px;padding:12px}
  .material-cab .material-foto{height:64px}
  .material-det{padding:4px 16px 22px}
  .color{width:88px}
  .color .chip{height:88px}
}

/* --- ambientes dentro de una linea (23/08) --- */
.ambiente{border:1px solid rgba(18,24,26,.10);border-radius:5px;margin-bottom:10px;background:#fcfbf9}
.ambiente-cab{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:0;padding:13px 16px;cursor:pointer;text-align:left;font:inherit}
.ambiente-cab:hover{background:rgba(36,57,60,.04)}
.ambiente-cab:focus-visible{outline:2px solid var(--rojo);outline-offset:-2px}
.ambiente-cab strong{font-family:'Outfit',sans-serif;font-size:1rem;color:var(--petroleo)}
.ambiente-cab em{display:block;font-style:normal;color:#5d6669;font-size:.88rem;margin-top:3px;max-width:62ch}
.ambiente.abierto .material-mas::after{transform:translate(-50%,-50%) scaleY(0)}
.ambiente-det{padding:2px 16px 18px}
.ambiente-det .colores{margin-bottom:0}
.material-det .sub-colores{margin-top:6px}

/* foto de obra opcional dentro de la muestra de un modelo */
.obra-mini{display:block;width:100%;height:104px;object-fit:cover;border-radius:4px;margin-top:6px;border:1px solid rgba(18,24,26,.12)}
@media(max-width:760px){ .obra-mini{height:88px} }

/* bajada bajo el titulo de una portada de seccion */
.hero-pagina .bajada-hero{margin-top:14px;font-size:clamp(1rem,2vw,1.18rem);color:rgba(255,255,255,.93);max-width:620px;text-shadow:0 1px 12px rgba(10,18,19,.5)}