/* Brera Design — sitio estático
   Layout: grilla editorial blanca, fotos grandes de ambiente, verde Brera como acento. */
:root{
  --verde:#21664b; --verde-osc:#174c37; --verde-claro:#e6efe9;
  --tinta:#1f1f1d; --texto:#55554f; --suave:#8a8a83; --linea:#e6e3df; --crema:#f5f3f0; --blanco:#fff;
  --wa:#1fae55;
  --f-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-texto:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --ancho:1240px; --gutter:clamp(16px,4vw,32px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-texto);color:var(--texto);background:var(--blanco);font-size:16px;line-height:1.65}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
h1,h2,h3{color:var(--tinta);line-height:1.15;text-wrap:balance;font-weight:500}
.wrap{max-width:var(--ancho);margin:0 auto;padding-inline:var(--gutter)}
.display{font-family:var(--f-display);font-style:italic;font-weight:500}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--verde)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;font:600 13px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--tinta);background:var(--tinta);color:#fff;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--verde);border-color:var(--verde)}
.btn.claro{background:transparent;color:var(--tinta)}
.btn.claro:hover{background:var(--tinta);color:#fff}
.btn.wa{background:var(--wa);border-color:var(--wa)}
.btn.wa:hover{background:#18934a;border-color:#18934a}
.btn.blanco{background:#fff;border-color:#fff;color:var(--verde)}
.btn svg{width:18px;height:18px;fill:currentColor}

/* barra y header */
.aviso{background:var(--verde);color:#fff;text-align:center;font-size:13px;padding:8px 16px}
.aviso b{font-weight:700}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.logo img{height:24px;width:auto}
.menu{display:flex;gap:28px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta)}
.menu a{padding:6px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current]{border-color:var(--verde);color:var(--verde)}
.nav-cta{font-size:13px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
.burger span{display:block;width:22px;height:1.5px;background:var(--tinta);margin:5px 0}

/* hero */
.hero{position:relative;min-height:min(78vh,680px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#2a2a28}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.62))}
.hero .wrap{position:relative;z-index:1;padding-block:56px;width:100%}
.hero h1{color:#fff;font-family:var(--f-display);font-style:italic;font-size:clamp(38px,6vw,72px);max-width:14ch}
.hero p{max-width:560px;font-size:18px;margin:16px 0 28px;color:rgba(255,255,255,.92)}
.hero .acciones{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn.claro{color:#fff;border-color:#fff}
.hero .btn.claro:hover{background:#fff;color:var(--tinta)}

/* datos de confianza */
.datos{border-bottom:1px solid var(--linea)}
.datos ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:28px}
.datos li{display:flex;flex-direction:column;gap:2px}
.datos strong{font-family:var(--f-display);font-style:italic;font-size:24px;color:var(--tinta);font-weight:500}
.datos span{font-size:14px}

section{padding-block:clamp(56px,8vw,96px)}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.cab h2{font-family:var(--f-display);font-style:italic;font-size:clamp(30px,3.6vw,44px);margin-top:6px}
.cab p{max-width:560px;margin-top:10px}

/* categorías */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--crema)}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cat:hover img{transform:scale(1.04)}
.cat span{position:absolute;left:0;bottom:0;right:0;padding:18px 20px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-family:var(--f-display);font-style:italic;font-size:24px}

/* grilla de productos */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 22px}
.card{display:flex;flex-direction:column;gap:4px}
.card .ph{aspect-ratio:1/1;background:var(--crema);overflow:hidden;position:relative;margin-bottom:10px}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .4s}
.card .ph img+img{position:absolute;inset:0;opacity:0}
.card:hover .ph img+img{opacity:1}
.card h3{font-size:16px;font-weight:600}
.card .lin{font-size:13px;color:var(--suave)}
.card .pr{font-size:15px;color:var(--tinta);font-variant-numeric:tabular-nums}
.card .pr small{display:block;font-size:13px;color:var(--verde);font-weight:600}
.tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--verde);color:#fff;font-size:11px;letter-spacing:.14em;font-weight:600;padding:4px 9px;text-transform:uppercase}

/* fábrica */
.fabrica{background:var(--crema)}
.fabrica .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.fotos2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fotos2 img{aspect-ratio:1/1;object-fit:cover;width:100%}
.fotos2 img:first-child{grid-row:span 2;aspect-ratio:auto;height:100%}
.specs{list-style:none;margin:22px 0 28px;display:grid;gap:12px}
.specs li{padding-left:28px;position:relative}
.specs li::before{content:"";position:absolute;left:2px;top:9px;width:12px;height:7px;border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg)}
.specs strong{color:var(--tinta)}

/* mosaico de ambientes */
.mosaico{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:280px 280px;gap:12px}
.mosaico img{width:100%;height:100%;object-fit:cover}
.mosaico img:first-child{grid-row:span 2}

.promo{background:var(--verde);color:#dfece5}
.promo .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.promo h2{color:#fff;font-family:var(--f-display);font-style:italic;font-size:clamp(30px,3.6vw,46px)}
.promo .grande{font-size:clamp(64px,9vw,120px);font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em}
.promo p{margin:14px 0 26px;max-width:460px}

/* locales */
.locales{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.local{border:1px solid var(--linea);display:grid;grid-template-columns:200px 1fr;min-width:0}
.local img{width:100%;height:100%;object-fit:cover;min-height:200px}
.local div{padding:22px 24px;min-width:0}
.local h3{font-size:18px;font-weight:600;margin-bottom:6px}
.local p{font-size:15px}
.local a.mapa{display:inline-block;margin-top:10px;color:var(--verde);font-weight:600;font-size:14px;border-bottom:1px solid currentColor}

/* reseñas */
.resenas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.resena{border-top:2px solid var(--tinta);padding-top:18px}
.resena .est{color:#e0a92b;letter-spacing:2px;font-size:15px}
.resena p{color:var(--tinta);margin:8px 0 10px;font-size:16px}
.resena span{font-size:13px;color:var(--suave)}

/* faq */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-weight:600;color:var(--tinta);font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;font-weight:400;color:var(--verde)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;max-width:72ch}

/* páginas internas */
.pagehead{background:var(--crema);padding-block:44px 36px}
.pagehead h1{font-family:var(--f-display);font-style:italic;font-size:clamp(34px,4.4vw,52px)}
.pagehead p{max-width:68ch;margin-top:12px}
.migas{font-size:13px;margin-bottom:12px;color:var(--suave)}
.migas a:hover{color:var(--verde)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-block:28px 32px}
.filtros a{border:1px solid var(--linea);padding:9px 16px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta)}
.filtros a[aria-current],.filtros a:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* producto */
.prod{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,60px);padding-block:28px 64px}
.prod>*{min-width:0}
.prod>*{min-width:0}
.gal .main{aspect-ratio:1/1;background:var(--crema)}
.gal .main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:10px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.thumbs button{flex:0 0 78px;height:78px;background:var(--crema);border:1px solid transparent;cursor:pointer;padding:0}
.thumbs button[aria-pressed="true"]{border-color:var(--tinta)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.info h1{font-family:var(--f-display);font-style:italic;font-size:clamp(34px,4vw,50px);margin:6px 0 12px}
.precio{font-size:24px;color:var(--tinta);font-variant-numeric:tabular-nums}
.transf{color:var(--verde);font-weight:600;margin-top:2px}
.opt{margin-block:26px 8px}
.opt .lbl{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--tinta);margin-bottom:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1px solid var(--linea);background:#fff;padding:10px 14px;font:inherit;font-size:14px;cursor:pointer;color:var(--tinta)}
.chips button[aria-pressed="true"]{border-color:var(--tinta);background:var(--tinta);color:#fff}
.cta{display:grid;gap:10px;margin-block:24px}
.nota{font-size:14px;color:var(--suave)}
.tabla-wrap{overflow-x:auto;margin-block:8px 28px}
table.precios{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
table.precios th,table.precios td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linea)}
table.precios th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);font-weight:600}
table.precios td:nth-child(n+2),table.precios th:nth-child(n+2){text-align:right}
table.precios td.t{color:var(--verde);font-weight:600}
.bloque{border-top:1px solid var(--linea);padding-top:24px;margin-top:24px}
.bloque h2{font-size:20px;font-weight:600;margin-bottom:12px}
.texto h3{font-size:18px;font-weight:600;margin:22px 0 6px}
.texto p{margin-bottom:12px}
.texto ul{margin:6px 0 14px 20px}
.texto li{margin-bottom:6px}
dl.ficha{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr);gap:10px 20px;font-size:15px}
dl.ficha dt{color:var(--tinta);font-weight:600}

/* blog */
.notas{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.nota-card img{aspect-ratio:16/9;object-fit:cover;width:100%;margin-bottom:12px;background:var(--crema)}
.nota-card h3{font-size:20px;font-weight:600}
.articulo{max-width:760px;margin:0 auto;padding-block:40px 72px}
.articulo .texto p{font-size:17px}

/* footer */
.footer{background:#121211;color:#a9a9a3;padding-block:64px 26px;font-size:15px}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.footer h2{color:#fff;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.footer a:hover{color:#fff}
.footer .logo img{filter:invert(1);height:22px;margin-bottom:16px}
.footer ul{list-style:none;display:grid;gap:8px}
.legal{border-top:1px solid #2a2a28;margin-top:44px;padding-top:20px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.wa-flotante{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.22);z-index:60}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

@media (max-width:1000px){
  .menu{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--linea)}
  .menu.abierto{display:flex}
  .menu a{padding:16px var(--gutter);border-bottom:1px solid var(--linea)}
  .burger{display:block}
  .nav-cta{display:none}
  .grid{grid-template-columns:repeat(3,1fr)}
  .datos ul{grid-template-columns:repeat(2,1fr)}
  .fabrica .wrap,.promo .wrap,.prod{grid-template-columns:1fr}
  .locales{grid-template-columns:1fr}
  .resenas{grid-template-columns:1fr 1fr}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  .cats{grid-template-columns:1fr 1fr;gap:10px}
  .cat span{font-size:18px;padding:12px 14px}
  .grid{grid-template-columns:1fr 1fr;gap:28px 12px}
  .mosaico{grid-template-columns:1fr 1fr;grid-template-rows:220px 160px 160px}
  .mosaico img:first-child{grid-column:span 2;grid-row:auto}
  .local{grid-template-columns:1fr}
  .local img{min-height:180px;max-height:220px}
  .resenas,.notas,.fcols{grid-template-columns:1fr}
  .hero{min-height:560px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
table.precios td,table.precios th{white-space:nowrap}
table.precios td:first-child{white-space:normal;min-width:110px}
@media (max-width:640px){
  .hero>img{object-position:70% center}
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.7) 55%)}
}

.resumen{font-size:15px;color:var(--texto);margin:-2px 0 16px;max-width:60ch}
.respuesta{background:var(--verde-claro);border-left:3px solid var(--verde);padding:16px 20px;margin-bottom:28px;color:var(--tinta);font-size:17px}
.texto h2{font-size:24px;font-weight:600;margin:32px 0 10px}

.pagehead-foto{height:clamp(200px,32vw,380px);background-size:cover;background-position:center}
.filtros.sub{margin-top:-18px}
.filtros.sub a{font-size:12px;padding:7px 13px;text-transform:none;letter-spacing:0;font-weight:500}
@media (max-width:640px){
  /* en el celular los filtros van en una fila deslizable, así los productos aparecen antes */
  .filtros{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filtros::-webkit-scrollbar{display:none}
  .filtros a{flex:0 0 auto;white-space:nowrap}
  .filtros.sub{margin-top:-20px}
}
.seccion-cat{padding-block:8px 48px;border-top:1px solid var(--linea)}
.seccion-cat:first-of-type{border-top:0}
.seccion-cat .cab{margin-block:28px 24px}