/* El Taller Querétaro — hoja de estilos compartida */
:root{
  --papel:#F2F1ED;
  --blanco:#FFFFFF;
  --tinta:#1B211E;
  --texto:#3E443D;
  --gris:#6E746C;
  --linea:#CDCEC7;
  --nogal:#6E5433;
  --cota:#5B7480;
  --medida:1180px;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--cota);outline-offset:3px}
.env{max-width:var(--medida);margin:0 auto;padding:0 40px}
@media(max-width:700px){.env{padding:0 22px}}
.serif{font-family:var(--serif)}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:20;background:rgba(242,241,237,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--linea)}
.barra .env{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.marca{font-weight:700;letter-spacing:-.02em;font-size:19px;text-decoration:none;line-height:1.1}
.marca span{display:block;font-weight:400;font-size:11.5px;color:var(--gris);letter-spacing:.06em}
.menu{display:flex;gap:22px;list-style:none;font-size:14.5px}
.menu a{text-decoration:none;color:var(--gris);padding-bottom:2px;border-bottom:1px solid transparent}
.menu a:hover,.menu a.aqui{color:var(--tinta);border-bottom-color:var(--nogal)}
.hamb{display:none;background:none;border:1px solid var(--linea);padding:9px 11px;cursor:pointer;color:var(--tinta);font:inherit;font-size:14px}
.hamb svg{display:block}
@media(max-width:880px){
  .menu{display:none}
  .hamb{display:inline-flex;align-items:center;gap:8px}
  .barra.abierta .menu{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:74px;background:var(--papel);border-bottom:1px solid var(--linea);padding:8px 22px 18px}
  .barra.abierta .menu li{border-top:1px solid var(--linea)}
  .barra.abierta .menu a{display:block;padding:14px 0;font-size:17px;border-bottom:0}
  .barra.abierta .menu a.aqui{color:var(--nogal)}
}

/* ---------- tipografía ---------- */
h1{font-size:clamp(38px,5.4vw,63px);line-height:1.02;letter-spacing:-.035em;font-weight:700;max-width:13ch}
h2{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.03em;font-weight:700;line-height:1.1}
h3{font-size:20px;font-weight:600;letter-spacing:-.015em}
.titulo-sec{font-size:13px;color:var(--gris);font-weight:500;margin-bottom:38px;letter-spacing:.02em;text-transform:uppercase}
.entrada{font-family:var(--serif);font-size:19.5px;line-height:1.62;color:var(--texto);max-width:46ch;margin-top:24px}
.parrafo{font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--texto)}

/* ---------- botones ---------- */
.acciones{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-size:15px;font-weight:500;padding:14px 24px;border:1px solid var(--tinta);cursor:pointer;font-family:inherit;background:none;color:inherit;line-height:1.3}
.btn-lleno{background:var(--tinta);color:var(--papel)}
.btn-lleno:hover{background:#2C332E}
.btn-linea:hover{background:var(--tinta);color:var(--papel)}
.ver-todo{font-size:14.5px;color:var(--nogal);text-decoration:none;border-bottom:1px solid var(--nogal);padding-bottom:2px}

/* ---------- cabecera de página interior ---------- */
.cabecera{padding:70px 0 44px;border-bottom:1px solid var(--linea)}
@media(max-width:700px){.cabecera{padding:46px 0 34px}}
.cabecera .entrada{margin-top:18px}
.cabecera h1{font-size:clamp(34px,4.6vw,54px)}

/* ---------- hero de portada ---------- */
.hero{padding:78px 0 70px;border-bottom:1px solid var(--linea)}
.hero-rejilla{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-texto{max-width:640px}
.lema{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(19px,2vw,23px);color:var(--nogal);margin-bottom:18px;letter-spacing:.005em}
.lema::before{content:'';display:inline-block;width:28px;height:1px;background:var(--nogal);vertical-align:middle;margin-right:12px;opacity:.7}
.hero-foto{margin:0}
.marco-hero{position:relative;display:block;background:var(--blanco);border:1px solid var(--linea);overflow:hidden}
.marco-hero img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transform:scale(1.06);will-change:transform}
/* velo: papel que se retira de abajo hacia arriba mientras las líneas se trazan; al final las líneas se disuelven */
.velo-papel{position:absolute;inset:0;z-index:1;background:var(--papel);pointer-events:none}
.velo-plano{position:absolute;inset:0;z-index:2;pointer-events:none}
.velo-plano .plano{width:100%;height:100%}
.velo-plano .plano path{stroke-width:1.4;stroke:var(--tinta);fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
html.tras-intro .velo-plano .plano path{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);opacity:1;animation:trazar var(--t) cubic-bezier(.3,.75,.35,1) calc(var(--d) + .3s) forwards}
.velo-papel{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.55) 48%,rgba(0,0,0,0) 62%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.55) 48%,rgba(0,0,0,0) 62%,rgba(0,0,0,0) 100%);-webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-position:0 0;mask-position:0 0}
html.tras-intro .velo-papel{animation:retirar 2.7s cubic-bezier(.45,0,.3,1) .4s forwards}
html.tras-intro .velo-plano{animation:desvanece .7s ease 3.2s forwards}
@keyframes retirar{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:0 100%;mask-position:0 100%}}
@media(prefers-reduced-motion:reduce){.velo-plano,.velo-papel{display:none}.marco-hero img{transform:none}}
.hero-foto figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:13.5px;color:var(--gris)}
.hero-foto figcaption strong{font-weight:500;color:var(--tinta)}
html.tras-intro .hero-foto{animation:subida 1.2s cubic-bezier(.2,.7,.2,1) .55s both}
@media(max-width:940px){.hero{padding:52px 0 40px}.hero-rejilla{grid-template-columns:1fr;gap:34px}.hero-foto{max-width:520px}}
.lienzo{margin-top:56px;padding-bottom:60px;border-bottom:1px solid var(--linea)}
.plano{display:block;width:100%;height:auto}
.plano path{fill:none;stroke:var(--tinta);stroke-width:.14;stroke-linecap:round;stroke-linejoin:round}
.leyenda{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--linea);font-size:13.5px;color:var(--gris)}
.leyenda strong{font-weight:500;color:var(--tinta)}
/* ---------- intro: el plano se dibuja a pantalla completa y se difumina ---------- */
.intro{position:fixed;inset:0;z-index:50;background:var(--papel);display:flex;align-items:center;justify-content:center;padding:28px;cursor:pointer}
.intro-marco{width:min(100%,1100px)}
.intro .plano{width:100%;height:auto;max-height:70vh}
.intro-pie{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--linea);font-size:13.5px;color:var(--gris);opacity:0;animation:aparece .8s ease 1.6s forwards}
.intro-pie strong{font-weight:500;color:var(--tinta)}
.intro-salto{letter-spacing:.04em;text-transform:uppercase;font-size:11.5px}
.intro.fuera{animation:desvanece 1.1s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
html.tras-intro .hero-texto{animation:subida 1.1s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes desvanece{to{opacity:0}}
@keyframes subida{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .plano-intro path{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:trazar calc(var(--t)*.8) cubic-bezier(.3,.75,.35,1) calc(var(--d)*.8) forwards}
}
@media(prefers-reduced-motion:reduce){.intro{display:none}}
@media(max-width:700px){.intro{padding:22px}.intro-salto{display:none}.intro .plano path{stroke-width:.22}}
@keyframes trazar{to{stroke-dashoffset:0}}
@keyframes aparece{to{opacity:1}}

/* ---------- razones (rejilla de 3 o 4) ---------- */
.razones{padding:74px 0;border-bottom:1px solid var(--linea)}
.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.rejilla-4{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.rejilla-2{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.razon{padding:0 30px;border-left:1px solid var(--linea)}
.razon:first-child{padding-left:0;border-left:0}
.razon h3{margin-bottom:11px}
.razon p{font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--texto)}
@media(max-width:860px){
  .rejilla-3,.rejilla-4,.rejilla-2{grid-template-columns:1fr}
  .razon{border-left:0;border-top:1px solid var(--linea);padding:26px 0 0;margin-top:26px}
  .razon:first-child{border-top:0;margin-top:0;padding-top:0}
}
@media(min-width:861px) and (max-width:1000px){
  .rejilla-4{grid-template-columns:1fr 1fr;row-gap:40px}
  .rejilla-4 .razon:nth-child(3){padding-left:0;border-left:0}
}

/* ---------- servicios (lista en 2 columnas) ---------- */
.servicios{padding:74px 0;border-bottom:1px solid var(--linea)}
.lista-serv{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
@media(max-width:860px){.lista-serv{grid-template-columns:1fr}}
.serv{padding:26px 0;border-top:1px solid var(--linea)}
.serv h3{margin-bottom:8px;font-size:21px}
.serv p{font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--texto)}

/* ---------- proyectos ---------- */
.proyectos{padding:78px 0;border-bottom:1px solid var(--linea)}
.encabezado-fila{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:40px;gap:20px;flex-wrap:wrap}
.obra{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;padding:38px 0;border-top:1px solid var(--linea);align-items:start}
@media(max-width:860px){.obra{grid-template-columns:1fr;gap:24px}}
.marco{position:relative;aspect-ratio:4/3;background:var(--blanco);border:1px solid var(--linea);overflow:hidden}
.marco img{width:100%;height:100%;object-fit:cover}
.marco a{display:block;height:100%}
.esq{position:absolute;width:13px;height:13px;border:1px solid var(--nogal);opacity:.5;z-index:2}
.e1{top:-1px;left:-1px;border-right:0;border-bottom:0}
.e2{top:-1px;right:-1px;border-left:0;border-bottom:0}
.e3{bottom:-1px;left:-1px;border-right:0;border-top:0}
.e4{bottom:-1px;right:-1px;border-left:0;border-top:0}
.obra h3{font-size:25px;letter-spacing:-.025em;font-weight:600;margin-bottom:6px}
.obra h3 a{text-decoration:none}
.obra h3 a:hover{color:var(--nogal)}
.sitio{color:var(--gris);font-size:14.5px;margin-bottom:22px}
.ficha{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:18px}
.ficha th{text-align:left;font-weight:500;color:var(--gris);padding:9px 16px 9px 0;border-top:1px solid var(--linea);width:104px;vertical-align:top;font-size:14px}
.ficha td{padding:9px 0;border-top:1px solid var(--linea);vertical-align:top}
.nota{font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--texto)}
.nota + .nota{margin-top:12px}
.obra .ver-todo{display:inline-block;margin-top:18px}

/* ---------- galería de un proyecto ---------- */
.galeria{padding:56px 0 78px;border-bottom:1px solid var(--linea)}
/* tira de 3 fotos, todas verticales */
.mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.mosaico figure{margin:0;background:var(--blanco);border:1px solid var(--linea);display:grid;grid-template-rows:1fr auto;overflow:hidden}
.mosaico img{width:100%;height:100%;min-height:0;aspect-ratio:3/4;object-fit:cover}
.mosaico figcaption{font-size:13px;color:var(--gris);padding:10px 12px;border-top:1px solid var(--linea)}
@media(max-width:860px){.mosaico{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:520px){.mosaico{grid-template-columns:1fr}}
/* fila de una foto ancha + una vertical */
.mosaico.fila{grid-template-columns:2fr 1fr}
.mosaico.fila figure.ancha img{aspect-ratio:16/9}
.mosaico.fila figure:not(.ancha) img{aspect-ratio:auto}
@media(max-width:860px){.mosaico.fila{grid-template-columns:1fr}.mosaico.fila figure:not(.ancha) img{aspect-ratio:3/4}}
/* galería completa: columnas tipo mampostería, proporción natural */
.masonry{columns:3;column-gap:18px;margin-top:18px}
.masonry figure{margin:0 0 18px;background:var(--blanco);border:1px solid var(--linea);break-inside:avoid}
.masonry img{width:100%}
.masonry figcaption{font-size:13px;color:var(--gris);padding:10px 12px;border-top:1px solid var(--linea)}
@media(max-width:860px){.masonry{columns:2;column-gap:12px}.masonry figure{margin-bottom:12px}}
@media(max-width:520px){.masonry{columns:1}}
.ficha-proyecto{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;padding:56px 0;border-bottom:1px solid var(--linea)}
@media(max-width:860px){.ficha-proyecto{grid-template-columns:1fr;gap:28px}}
.miga{font-size:13.5px;color:var(--gris);margin-bottom:22px}
.miga a{text-decoration:none;border-bottom:1px solid var(--linea)}
.miga a:hover{border-bottom-color:var(--nogal)}
.portada-proyecto{border:1px solid var(--linea);background:var(--blanco);position:relative}
.portada-proyecto img{width:100%;aspect-ratio:21/9;object-fit:cover}
.portada-proyecto.diptico{display:grid;grid-template-columns:1fr 1fr;gap:18px;border:0;background:none}
.portada-proyecto.diptico>div,.portada-proyecto.vertical>div{position:relative;border:1px solid var(--linea);background:var(--blanco)}
.portada-proyecto.diptico img{aspect-ratio:4/5}
.portada-proyecto.vertical{border:0;background:none;display:grid;grid-template-columns:minmax(0,640px);justify-content:center}
.portada-proyecto.vertical img{aspect-ratio:4/5}
@media(max-width:600px){.portada-proyecto.diptico{grid-template-columns:1fr;gap:12px}}
.plano-proyecto{margin-top:48px;padding-top:34px;border-top:1px solid var(--linea)}
.plano-proyecto .plano path{stroke-width:.12}

/* ---------- proceso (bloque oscuro) ---------- */
.proceso{padding:78px 0;background:var(--tinta);color:#E6E5DF}
.proceso h2{margin-bottom:46px}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:860px){.pasos{grid-template-columns:1fr;gap:0}}
.paso{border-top:1px solid #3A423B;padding-top:20px}
@media(max-width:860px){.paso{padding:22px 0}}
.num{font-size:13px;color:#98A093;margin-bottom:14px;font-variant-numeric:tabular-nums}
.paso h3{margin-bottom:10px}
.paso p{font-family:var(--serif);font-size:16.5px;line-height:1.62;color:#B9BEB4}
.proceso .btn{border-color:#E6E5DF;color:#E6E5DF;margin-top:44px}
.proceso .btn:hover{background:#E6E5DF;color:var(--tinta)}

/* ---------- taller ---------- */
.taller{padding:82px 0;border-bottom:1px solid var(--linea)}
.taller .env{display:grid;grid-template-columns:1fr 1.25fr;gap:60px}
@media(max-width:940px){.taller .env{grid-template-columns:1fr;gap:34px}}
.retrato{aspect-ratio:4/3;align-self:start;background:var(--blanco);border:1px solid var(--linea);position:relative;overflow:hidden}
.retrato img{width:100%;height:100%;object-fit:cover}
.taller p{font-family:var(--serif);font-size:18px;line-height:1.68;color:var(--texto);max-width:58ch;margin-bottom:19px}
.taller h2{margin-bottom:26px}
.cita{font-family:var(--serif);font-size:25px;line-height:1.4;color:var(--tinta);border-left:2px solid var(--nogal);padding-left:22px;margin:30px 0 0;font-weight:300}

/* ---------- bloque de texto a dos columnas ---------- */
.dos{padding:78px 0;border-bottom:1px solid var(--linea)}
.dos .env{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:860px){.dos .env{grid-template-columns:1fr;gap:32px}}
.dos h2{max-width:14ch}
.dos p{font-family:var(--serif);font-size:18px;line-height:1.66;color:var(--texto);margin-bottom:18px}
.dos .btn{margin-top:8px}

/* ---------- argumentos (para arquitectos) ---------- */
.argumentos{padding:0}
.argumento{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;padding:52px 0;border-bottom:1px solid var(--linea)}
@media(max-width:860px){.argumento{grid-template-columns:1fr;gap:14px;padding:40px 0}}
.argumento h2{font-size:clamp(24px,2.8vw,32px)}
.argumento p{font-family:var(--serif);font-size:18px;line-height:1.66;color:var(--texto);max-width:60ch}

/* ---------- testimonios ---------- */
.testimonios{padding:74px 0;border-bottom:1px solid var(--linea)}
.testimonio{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--texto);max-width:56ch;font-weight:300}
.testimonio footer{font-family:var(--sans);font-size:14px;color:var(--gris);margin-top:14px;font-weight:400}
.pendiente{border:1px dashed var(--linea);padding:26px;color:var(--gris);font-size:14.5px;max-width:56ch}

/* ---------- cierre / llamada ---------- */
.cierre{padding:84px 0;border-bottom:1px solid var(--linea)}
.cierre h2{max-width:16ch;margin-bottom:16px}
.cierre p{font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--texto);max-width:46ch;margin-bottom:28px}

/* ---------- contacto ---------- */
.contacto{padding:70px 0 34px}
.contacto .env{display:grid;grid-template-columns:1.3fr 1fr;gap:56px}
@media(max-width:860px){.contacto .env{grid-template-columns:1fr;gap:34px}}
.contacto h2{margin-bottom:18px;max-width:16ch}
.contacto .intro{font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--texto);max-width:46ch;margin-bottom:30px}
.datos dt{font-size:13.5px;color:var(--gris);margin-top:20px}
.datos dt:first-child{margin-top:0}
.datos dd{font-size:17px;margin-top:4px}
.datos a{text-decoration:none;border-bottom:1px solid var(--linea)}
.datos a:hover{border-bottom-color:var(--nogal)}

/* ---------- formulario ---------- */
.forma{margin-top:8px}
.campo{margin-bottom:18px}
.campo label{display:block;font-size:13.5px;color:var(--gris);margin-bottom:6px}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo textarea,.campo select{
  width:100%;font:inherit;font-size:16px;padding:12px 13px;border:1px solid var(--linea);background:var(--blanco);color:var(--tinta);border-radius:0;-webkit-appearance:none;appearance:none
}
.campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E746C' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.campo textarea{min-height:140px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:2px solid var(--cota);outline-offset:0;border-color:var(--cota)}
.campo input[type=file]{font-size:14px;color:var(--gris)}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.fila-2{grid-template-columns:1fr}}
.aviso{font-size:13px;color:var(--gris);margin-top:14px;max-width:50ch}
.oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- pie ---------- */
.pie-sitio{border-top:1px solid var(--linea);padding:28px 0 44px;font-size:13.5px;color:var(--gris)}
.pie-sitio .env{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pie-sitio a{text-decoration:none}
.pie-sitio a:hover{color:var(--tinta)}
.pie-sitio nav{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- marcas ---------- */
.grupo-marcas{padding:64px 0;border-bottom:1px solid var(--linea)}
.grupo-cab{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:baseline;margin-bottom:34px}
.grupo-cab h2{font-size:clamp(24px,2.8vw,32px)}
.grupo-cab .parrafo{max-width:56ch}
@media(max-width:860px){.grupo-cab{grid-template-columns:1fr;gap:10px}}
.rejilla-marcas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.rejilla-marcas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rejilla-marcas{grid-template-columns:1fr}}
.marca-t{background:var(--blanco);border:1px solid var(--linea);padding:26px 28px 24px;display:grid;gap:12px;align-content:start}
.marca-logo{height:76px;display:flex;align-items:center;border-bottom:1px solid var(--linea);padding-bottom:16px;margin-bottom:6px}
.marca-logo img{max-height:52px;max-width:180px;width:auto;height:auto;object-fit:contain}
.logo-texto{font-size:26px;font-weight:700;letter-spacing:-.03em}
.marca-t h3{font-size:18px}
.marca-t h3 span{font-weight:400;color:var(--gris);font-size:14px}
.marca-t p{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--texto)}
.marca-t .ver-todo{justify-self:start}

/* ---------- maderas ---------- */
.rejilla-maderas{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.rejilla-maderas{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.rejilla-maderas{grid-template-columns:repeat(2,1fr);gap:12px}}
.madera{background:var(--blanco);border:1px solid var(--linea);padding:14px 16px 20px;display:grid;gap:6px;align-content:start}
.chip{position:relative;height:96px;margin:-14px -16px 12px;background:
  repeating-linear-gradient(101deg,rgba(255,255,255,.055) 0 2px,rgba(0,0,0,0) 2px 7px,rgba(0,0,0,.05) 7px 9px,rgba(0,0,0,0) 9px 16px),
  linear-gradient(135deg,color-mix(in srgb,var(--m),#fff 14%) 0%,var(--m) 55%,color-mix(in srgb,var(--m),#000 18%) 100%);
  border-bottom:1px solid var(--linea)}
.chip .esq{border-color:rgba(255,255,255,.7);opacity:.8}
.madera h3{font-size:17px}
.madera-sub{font-size:12.5px;color:var(--gris);line-height:1.4}
.madera p:not(.madera-sub){font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--texto)}

/* ---------- texto legal ---------- */
.legal h2{font-size:21px;margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{font-family:var(--serif);font-size:17px;line-height:1.66;color:var(--texto);margin-bottom:14px}
.legal em{font-style:italic;background:#FFF3C4;padding:0 4px}
.pie-sitio span a{border-bottom:1px solid var(--linea)}