/* 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;
  --arena:#ece8e2; --arena-osc:#e3ddd4;
  --wa:#1fae55;
  --f-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-texto:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --ancho:1440px; --gutter:clamp(16px,4vw,32px);
}
/* en compu el margen lateral crece con la pantalla; en tablet y celular queda como siempre */
@media (min-width:1025px){:root{--gutter:clamp(20px,4vw,56px)}}
*{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:20px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
.menu a{padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{border-color:var(--verde);color:var(--verde)}
.menu .solo-desplegable{display:none}  /* "Inicio": en compu ya lleva el logo */
.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: texto a la izquierda y foto a la derecha, dentro del mismo contenedor que el resto de la página
   (la foto termina donde termina el contenido). En celular, foto arriba a todo el ancho y texto abajo,
   así el texto nunca tapa a las personas de la foto */
.hero{background:var(--crema);padding:0}
.hero>.wrap{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);min-height:min(78vh,680px)}
.hero-foto{position:relative;order:2;background:#d9d2c7;overflow:hidden;margin-block:clamp(28px,3.4vw,48px)}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero-texto{order:1;display:flex;flex-direction:column;justify-content:center;padding:56px clamp(24px,4vw,64px) 56px 0}
.hero h1{font-family:var(--f-display);font-style:italic;font-size:clamp(40px,4.4vw,64px);margin-top:10px;max-width:12ch}
.hero-texto>p:not(.eyebrow){max-width:44ch;font-size:18px;margin:18px 0 28px;color:var(--texto)}
.hero .acciones{display:flex;gap:12px;flex-wrap:wrap}

/* 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}
.datos .estrella{font-style:normal;color:#e0a92b;font-family:var(--f-texto);font-size:.9em}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

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 de la home: croquis en planta (vista desde arriba) */
.tcats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tcat{display:flex;flex-direction:column;aspect-ratio:1/1;padding:18px;background:var(--arena);border-radius:4px;color:var(--tinta);transition:background .2s}
.tcat:hover{background:var(--arena-osc)}
.tcat h3{font:600 13px/1.35 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
.tcat h3 small{display:block;font-size:11px;letter-spacing:.06em;text-transform:none;font-weight:400;color:var(--suave);margin-top:4px}
/* el croquis ocupa el espacio que deja el texto: nunca se pisan, aunque el título baje a dos líneas */
.tcat svg{flex:1 1 0;min-height:0;width:88%;align-self:center;margin-top:6%}
.tcat svg *{fill:none;stroke:var(--tinta);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tcat svg .dash{stroke-dasharray:5 4}
.tcat svg .thin{stroke-width:1.4}
.tcat svg text{fill:var(--tinta);stroke:none;font-size:11px;letter-spacing:.05em;font-family:var(--f-texto)}

/* 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}
/* filtros de la tienda con el croquis de cada categoría en miniatura (el mismo de la home) */
.filtros a{display:inline-flex;align-items:center;gap:7px;padding-inline:13px;letter-spacing:.04em}
.filtros .ico{flex:0 0 auto;width:28px;height:22px;margin-block:-2px}
.filtros .ico *{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.filtros .ico .thin{stroke-width:1}

/* producto */
.prod{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,60px);padding-block:28px 64px}
.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}

/* con 9 secciones y el margen de compu, el menú completo entra desde 1261 px; antes va el botón de menú */
@media (max-width:1260px){
  .menu{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--linea);max-height:calc(100vh - 72px);overflow-y:auto}
  .menu.abierto{display:flex}
  .menu a{padding:16px var(--gutter);border-bottom:1px solid var(--linea)}
  .menu .solo-desplegable{display:block}
  .burger{display:block}
  .nav-cta{display:none}
}
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .datos ul{grid-template-columns:repeat(2,1fr)}
  .fabrica .wrap,.promo .wrap,.prod{grid-template-columns:1fr}
  .hero>.wrap{grid-template-columns:1fr;min-height:0;max-width:none;padding-inline:0}
  .hero-foto{order:0;aspect-ratio:3/2;margin-block:0}
  .hero-texto{padding:36px var(--gutter) 44px}
  .tcats{grid-template-columns:repeat(2,1fr);gap:10px}
  .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}
  .hero-foto{aspect-ratio:1/1}
  .hero-foto img{object-position:50% 50%}
  .hero-texto{padding:28px var(--gutter) 36px}
  .hero-texto>p:not(.eyebrow){font-size:16px;margin:14px 0 22px}
  .hero .acciones .btn{flex:1 1 auto}
  .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}
}
@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:520px){
  .tcat{padding:12px}
  .tcat h3{font-size:11px}
  .tcat h3 small{font-size:10px}
  .tcat svg{width:84%;margin-top:4%}
}

.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}
/* etiqueta de origen y plazo en las fichas de exterior */
.origen{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.4;color:var(--verde-osc);background:var(--verde-claro);border-radius:3px}
.origen::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;background:currentColor}
.origen.importado{color:#5f513b;background:var(--arena)}
/* en compu el texto corrido no se estira con el contenedor ancho: renglones de unos 70 caracteres
   (Montserrat es ancha: 38em ≈ 70 letras). Las grillas y las fotos sí usan todo el ancho.
   Va al final para ganarle a los máximos de cada bloque; en tablet y celular no cambia nada */
@media (min-width:1025px){
  .texto p,.texto li,.pagehead p,.faq details p,.nota-card p,.articulo .respuesta{max-width:38em;text-wrap:pretty}
}