: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}
/* 28/08 (noche): Gustavo avisó que en el celular cuesta leer las letras del
   detalle técnico (AGUA, ESPESOR, TABLA...) — más grandes y con menos tracking */
@media(max-width:760px){
  .datos{gap:18px 22px}
  .datos dt{font-size:.8rem;letter-spacing:.1em}
  .datos dd{font-size:1.05rem;line-height:1.5}
}
.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)}

/* ── TARJETAS DE MATERIAL EN GRILLA (28/08) ──────────────────────────────
   Pedido de Gustavo: las fichas dejan de ser bandas horizontales y pasan a
   tarjetas verticales de a tres, con la foto grande arriba y el texto abajo.
   Al tocar una, esa tarjeta se expande a todo el ancho y muestra el detalle. */
/* 28/08 (corregido): vuelven las tres columnas, pero la foto pasa a vertical 3:4.
   Gustavo pidió cuadros MÁS VERTICALES, no más grandes. */
.materiales-grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.materiales-grilla .material.acordeon{margin-bottom:0}
.materiales-grilla .material-cab{display:block;padding:0;text-align:left}
.materiales-grilla .material-cab .material-foto{height:auto;aspect-ratio:3/4;width:100%;border-radius:0}
.materiales-grilla .material-tit{display:block;padding:18px 20px 16px}
.materiales-grilla .material-tit p{max-width:none}
.materiales-grilla .material-mas{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(18,24,26,.18)}
.materiales-grilla .material.acordeon{position:relative}
.materiales-grilla .material-det{padding:4px 20px 24px}

/* la tarjeta abierta toma toda la fila y se acomoda en dos columnas */
.materiales-grilla .material.acordeon.abierto{grid-column:1/-1}
.materiales-grilla .material.abierto .material-cab{display:grid;grid-template-columns:300px 1fr;
  align-items:center;gap:24px}
.materiales-grilla .material.abierto .material-cab .material-foto{aspect-ratio:4/3}
.materiales-grilla .material.abierto .material-tit{padding:0 20px 0 0}

@media(max-width:900px){
  .materiales-grilla{grid-template-columns:repeat(2,1fr)}
  .materiales-grilla .material.abierto .material-cab{grid-template-columns:1fr}
  .materiales-grilla .material.abierto .material-tit{padding:18px 20px 16px}
}
@media(max-width:600px){
  .materiales-grilla{grid-template-columns:1fr;gap:16px}
}

/* ── GRILLA DE MODELOS, ESTILO VITRINA (28/08) ───────────────────────────
   Pedido de Gustavo, tomando como referencia cómo muestra los productos
   Patagonia Flooring: cada modelo es una tarjeta grande con la muestra
   vertical, el nombre abajo en una barra oscura, y una lupa que la amplía.
   Sin simulador de ambiente: eso quedó descartado. */
.colores{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:6px}
.color{margin:0;width:auto;position:relative;background:#fff;border-radius:6px;overflow:hidden;
  border:1px solid rgba(18,24,26,.10);
  /* 29/08: columna flex para que en una misma fila convivan tarjetas con foto de
     ambiente y sin ella. La muestra estira lo que haga falta y el nombre queda
     siempre abajo, alineado con el resto — antes las tarjetas sin foto dejaban un
     hueco blanco debajo del nombre. */
  display:flex;flex-direction:column}
/* 28/08 (noche): la tarjeta entera se puede tocar para abrir el carrusel cuando
   el color tiene foto cargada (con-foto la agrega el script del visor) */
.color.con-foto{cursor:pointer}
.color.con-foto:hover{border-color:rgba(18,24,26,.28)}
.color.con-foto:hover .lupa{background:#fff}
.color .chip{display:block;height:auto;aspect-ratio:3/4;border-radius:0;border:0;
  background-size:cover;background-position:center;flex:1 1 auto;min-height:0}
.color figcaption{margin:0;background:var(--petroleo);color:#fff;font-size:.86rem;
  text-align:center;padding:11px 8px;line-height:1.25}
.color-sin-foto .chip{background:linear-gradient(135deg,#e8e0d4,#cdbfa9)}

/* la lupa, sobre la muestra */
.color .lupa{position:absolute;left:10px;bottom:56px;width:34px;height:34px;border:0;padding:0;
  border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 2px 6px rgba(18,24,26,.25);
  cursor:pointer;display:grid;place-items:center}
.color .lupa svg{width:17px;height:17px;stroke:var(--petroleo);fill:none;stroke-width:2.1}
.color .lupa:hover{background:#fff}
.color .lupa:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}

/* la foto de obra, cuando el modelo tiene una, va bajo la muestra */
/* object-position corrido hacia abajo (28/08, noche): en una foto de ambiente el piso
   suele estar en la mitad inferior del cuadro, y centrado (50%) recortaba de lleno la
   cama/mueble en vez del piso */
.obra-mini{display:block;width:100%;height:120px;object-fit:cover;object-position:center 80%;
  border-radius:0;margin:0;border:0;border-top:1px solid rgba(18,24,26,.10);flex:0 0 auto}
/* 29/08: en Placas PVC la foto de ambiente es de una PARED, no de un piso: el centro
   de interes esta arriba, no abajo. Las minis de esta linea se recortan de fabrica
   apaisadas (2,2:1), asi que object-position vertical no las afecta, pero se deja
   centrado por si alguna llega mas alta. */
img.obra-mini[src*="placas-uv"]{object-position:center center}
.color figcaption{flex:0 0 auto}

/* visor ampliado */
.visor{position:fixed;inset:0;background:rgba(12,17,18,.88);display:none;z-index:200;
  align-items:center;justify-content:center;padding:24px}
.visor[open],.visor.abierto{display:flex}
.visor-caja{max-width:820px;width:100%;background:#fff;border-radius:8px;overflow:hidden}
.visor-marco{position:relative}
.visor-caja img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#f2ede6}
.visor-flecha{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
  border:0;border-radius:50%;background:rgba(12,17,18,.55);color:#fff;font-size:1.6rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.visor-flecha:hover{background:rgba(12,17,18,.8)}
.visor-flecha:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
.visor-flecha[hidden]{display:none}
.visor-prev{left:10px}
.visor-next{right:10px}
.visor-pie{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px}
.visor-pie strong{font-family:'Outfit',sans-serif;color:var(--petroleo);font-size:1.05rem}
.visor-cont{font-family:'Instrument Sans',sans-serif;font-size:.85rem;color:#666;margin-right:auto;margin-left:10px}
.visor-cerrar{border:0;background:var(--petroleo);color:#fff;border-radius:4px;padding:9px 16px;
  cursor:pointer;font-family:'Instrument Sans',sans-serif;font-size:.9rem}
@media(max-width:640px){ .visor-flecha{width:36px;height:36px;font-size:1.3rem} }

@media(max-width:900px){ .colores{grid-template-columns:repeat(3,1fr);gap:14px} }
@media(max-width:640px){ .colores{grid-template-columns:repeat(2,1fr);gap:12px}
  .color figcaption{font-size:.8rem;padding:9px 6px}
  .color .lupa{bottom:48px;width:30px;height:30px} }

/* ── GALERÍA DE FOTOS POR PRODUCTO (28/08) ───────────────────────────────
   Se cargan solas: alcanza con dejar los archivos en
   images/galeria/<id-del-producto>/1.webp, 2.webp, 3.webp…
   Las que no existen se borran solas y, si no hay ninguna, el bloque
   entero se oculta. No hay que tocar el HTML para sumar fotos. */
.galeria-bloque{margin-top:22px}
.galeria-bloque .sub-colores{margin-bottom:10px}
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.galeria img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;
  border:1px solid rgba(18,24,26,.10);cursor:zoom-in;background:#efeae3}
.galeria img:hover{filter:brightness(1.04)}
@media(max-width:760px){ .galeria{grid-template-columns:repeat(3,1fr);gap:9px} }
@media(max-width:480px){ .galeria{grid-template-columns:repeat(2,1fr)} }

/* ── PÁGINA PROPIA POR PRODUCTO (28/08) ──────────────────────────────────
   Al tocar un producto ya no se despliega un acordeón: se abre su página.
   Foto arriba a la izquierda, datos al lado, colores y galería abajo, y un
   bloque de productos relacionados al final. Las genera _build_productos.py. */
.prod-cab{padding:38px 0 10px;background:var(--crema)}
.prod-cab .volanta a{color:var(--ocre);text-decoration:none}
.prod-cab .volanta a:hover{text-decoration:underline}
.prod-cab-grilla{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:34px;
  align-items:center;margin-top:14px}
.prod-foto{aspect-ratio:3/4;background-size:cover;background-position:center;border-radius:8px}
.prod-intro h1{color:var(--petroleo);font-size:2.1rem;line-height:1.12;margin-bottom:12px}
.prod-badge{display:inline-block;margin:0 0 12px;padding:6px 14px;border-radius:999px;
  background:var(--rojo);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.02em}
.prod-intro p{color:#3d4547;font-size:1.02rem;max-width:52ch}
.prod-intro .cta{margin-top:20px}
.prod-intro .nota{display:block;margin-top:10px;font-size:.86rem;color:#6b7477}
.prod-cuerpo{padding:34px 0 56px;background:var(--crema)}
.prod-cuerpo .datos{margin-bottom:26px}

.relacionados{padding:52px 0 64px;background:#fff}
.rel-grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rel-card{display:block;text-decoration:none;background:#fff;border:1px solid rgba(18,24,26,.10);
  border-radius:6px;overflow:hidden}
.rel-card:hover{box-shadow:0 4px 16px rgba(18,24,26,.10)}
.rel-foto{display:block;width:100%;aspect-ratio:3/4;background-size:cover;background-position:center}
.rel-tit{display:block;padding:16px 18px 18px}
.rel-tit strong{display:block;font-family:'Outfit',sans-serif;font-size:1.08rem;
  color:var(--petroleo);margin-bottom:5px}
.rel-tit em{font-style:normal;color:#4a5457;font-size:.92rem;line-height:1.35}

/* la tarjeta de la grilla pasa a ser un enlace a la página del producto */
.materiales-grilla a.material-cab{display:block;text-decoration:none}
.materiales-grilla .material-cab .material-mas::after{transform:translate(-50%,-50%) rotate(-45deg);
  width:2px;height:12px}

@media(max-width:860px){
  .prod-cab-grilla{grid-template-columns:1fr;gap:20px}
  .prod-foto{aspect-ratio:4/3}
  .prod-intro h1{font-size:1.7rem}
  .rel-grilla{grid-template-columns:1fr;gap:16px}
  .rel-foto{aspect-ratio:16/9}
}

/* la tarjeta ahora entra a la página del producto: flecha en vez de + */
.material-ir{position:relative;width:26px;height:26px;justify-self:center;border-radius:50%;
  background:rgba(36,57,60,.08)}
.materiales-grilla .material-ir{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(18,24,26,.18)}
.material-ir::before,.material-ir::after{content:'';position:absolute;background:var(--petroleo)}
.material-ir::before{width:11px;height:2px;left:50%;top:50%;transform:translate(-55%,-50%)}
.material-ir::after{width:7px;height:7px;left:50%;top:50%;border-right:2px solid var(--petroleo);
  border-top:2px solid var(--petroleo);background:none;transform:translate(-95%,-50%) rotate(45deg)}
.materiales-grilla .material.acordeon:hover{box-shadow:0 5px 18px rgba(18,24,26,.11)}

/* ── BOTÓN VOLVER, ARRIBA A LA IZQUIERDA DE LA PÁGINA DEL PRODUCTO (28/08) ──
   Pedido de Gustavo: que al abrir el producto el botón de volver quede en la
   esquina superior izquierda de la pantalla, no como una volanta más. */
.prod-cab{padding-top:22px}
.prod-volver{display:inline-flex;align-items:center;gap:9px;padding:9px 17px 9px 14px;
  border:1px solid rgba(36,57,60,.22);border-radius:999px;background:#fff;
  font-family:'Instrument Sans',sans-serif;font-size:.9rem;font-weight:600;
  color:var(--petroleo);text-decoration:none;line-height:1;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.prod-volver:hover{background:var(--petroleo);border-color:var(--petroleo);color:#fff}
.pv-flecha{position:relative;width:13px;height:11px;flex:0 0 13px}
.pv-flecha::before{content:'';position:absolute;left:0;top:50%;width:13px;height:2px;
  background:currentColor;transform:translateY(-50%)}
.pv-flecha::after{content:'';position:absolute;left:0;top:50%;width:7px;height:7px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}
@media(max-width:860px){
  .prod-volver{padding:8px 14px 8px 12px;font-size:.85rem}
}

/* ── WHATSAPP FIJO EN LA BARRA DE ARRIBA (28/08) ────────────────────────────
   Gustavo lo marcó en rojo sobre la captura: lo quiere en la barra, a la
   derecha. Como la barra es sticky, el círculo queda siempre a la vista. */
.wsp-barra{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 2px 8px rgba(10,18,19,.30);
  transition:transform .15s ease,box-shadow .15s ease}
.wsp-barra svg{width:22px;height:22px;display:block}
.wsp-barra:hover{transform:scale(1.08);box-shadow:0 4px 12px rgba(10,18,19,.38)}
@media(max-width:1100px){
  /* en el celular: logo · whatsapp · hamburguesa arriba, y el menú abajo */
  header.barra .lockup{order:1}
  .wsp-barra{order:2;width:36px;height:36px;margin-left:auto}
  header.barra .hamb{order:3}
  header.barra nav.menu-top{order:4}
}

/* ── PESTAÑAS DE ESPESOR (29/08) ─────────────────────────────────────────
   Gustavo pidió separar SPC Click en dos pestañas (6 mm y 8 mm) para que no
   se mezclen las fichas técnicas ni las fotos de cada espesor. Genérico por
   si otro producto necesita lo mismo más adelante: basta con repetir el
   bloque .spc-tabs en su parcial de _fuente_productos/. */
.spc-tabs-nav{display:flex;gap:10px;margin-bottom:22px}
.spc-tab-btn{flex:1;padding:13px 18px;border:1px solid rgba(18,24,26,.16);border-radius:8px;
  background:#fff;color:var(--petroleo);font-family:'Outfit',sans-serif;font-weight:600;
  font-size:1rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.spc-tab-btn:hover{border-color:rgba(18,24,26,.32)}
.spc-tab-btn.activo{background:var(--petroleo);color:#fff;border-color:var(--petroleo)}
.spc-tab-panel[hidden]{display:none}
.spc-tab-foto{width:100%;aspect-ratio:16/9;border-radius:8px;background-size:cover;
  background-position:center;margin-bottom:18px}
.spc-tab-panel h3{margin:0 0 6px;font-size:1.2rem;color:var(--petroleo)}
.spc-tab-panel .spc-tab-bajada{margin:0 0 20px;color:#4a5457;line-height:1.4}
@media(max-width:600px){
  .spc-tabs-nav{gap:8px}
  .spc-tab-btn{padding:11px 10px;font-size:.92rem}
  .spc-tab-foto{aspect-ratio:4/3}
}
img.obra-mini[src*="interior-tradicional"]{object-position:center center}
img.obra-mini[src*="linea-sharp"]{object-position:center center}
img.obra-mini[src*="linea-curly"]{object-position:center center}
img.obra-mini[src*="/flat-"]{object-position:center center}

img.obra-mini[src*="decopanel-liso"]{object-position:center center}