/*
Theme Name: La Calera
Description: Tema a medida de Materiales La Calera. KSC Informática.
Version: 1.0.0
Author: KSC Informática
Text Domain: lacalera
*/
@font-face{font-family:"Alegreya Sans";font-weight:400;font-style:normal;font-display:swap;src:url(assets/fuentes/alegreya400.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:500;font-style:normal;font-display:swap;src:url(assets/fuentes/alegreya500.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:700;font-style:normal;font-display:swap;src:url(assets/fuentes/alegreya700.woff2) format("woff2")}
@font-face{font-family:"Young Serif";font-weight:400;font-style:normal;font-display:swap;src:url(assets/fuentes/young.woff2) format("woff2")}


:root{
  --cal:#eff1ec; --papel:#fafbf8; --junta:#c8c9c0; --tinta:#1d2b2c; --tinta-suave:#4a5757;
  --verde:#245451; --almagra:#8e302e; --ocre:#c39559; --ocre-claro:#ecd9b8;
  --serif:"Young Serif",Georgia,serif; --sans:"Alegreya Sans",Verdana,sans-serif;
  --margen:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cal);color:var(--tinta);font:400 1.1875rem/1.55 var(--sans)}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--almagra);text-underline-offset:.16em}
a:hover{color:var(--verde)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;text-wrap:balance}
h2{font-size:clamp(2rem,3.6vw,3.25rem)}
h3{font-size:1.5rem;line-height:1.2}
p{margin:0 0 1em;max-width:62ch}
:focus-visible{outline:3px solid var(--almagra);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


.cabecera{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:12px var(--margen);background:var(--cal)}
.marca{display:flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none;font:400 1.3rem/1 var(--serif);margin-right:auto}
.marca img{width:40px;height:40px}
.menu{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.menu a{color:var(--tinta);text-decoration:none;padding:6px 0}
.menu a:hover{color:var(--almagra);text-decoration:underline}
.menu .tel{font-weight:700;color:var(--almagra)}

/* Portada: el texto ocupa un hueco cortado en el suelo, alineado con las juntas */
.suelo{position:relative;background:var(--junta)}
.suelo svg{width:100%;height:100%;position:absolute;inset:0}
.hueco{background:var(--cal)}
.hueco p{font-size:1.25rem;max-width:56ch}
.hueco h1{font-size:clamp(2.25rem,3.4vw,4.25rem);margin-bottom:.45em}
.botones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.boton{display:inline-block;background:var(--almagra);color:#fff;border:2px solid var(--almagra);font:700 1.1rem/1.2 var(--sans);padding:12px 20px;text-decoration:none;cursor:pointer}
.boton:hover{background:var(--verde);border-color:var(--verde);color:#fff}
.boton.claro{background:transparent;color:var(--almagra)}
.boton.claro:hover{background:var(--almagra);border-color:var(--almagra);color:#fff}
@media (min-width:1180px){
  .suelo{aspect-ratio:2/1}
  .hueco{position:absolute;left:12.5%;top:0;width:62.5%;height:75%;padding:clamp(24px,3.2vw,56px);display:flex;flex-direction:column;justify-content:flex-end}
}
@media (max-width:1179px){
  .suelo{display:flex;flex-direction:column-reverse}
  .suelo-dibujo{position:relative;aspect-ratio:2/1}
  .hueco{padding:28px var(--margen) 32px}
}

/* Probador de colores */
.probador{background:var(--papel);padding:clamp(32px,5vw,64px) var(--margen);display:grid;gap:32px 56px;grid-template-columns:minmax(220px,340px) 1fr}
.probador h2{margin-bottom:.4em}
#muestra{width:100%;aspect-ratio:1;border:1px solid var(--junta)}
#muestra [data-z]{cursor:pointer}
.grupo{margin:18px 0 0;padding:0;border:0}
.grupo legend{padding:0;font-weight:700;margin-bottom:8px}
.fila{display:flex;flex-wrap:wrap;gap:6px}
.modelo{padding:8px 14px;background:transparent;border:1px solid var(--tinta-suave);font:inherit;color:inherit;cursor:pointer}
.modelo[aria-pressed=true]{background:var(--verde);border-color:var(--verde);color:#fff}
.zona{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;background:transparent;border:1px solid var(--junta);font:inherit;font-size:1.05rem;color:inherit;cursor:pointer}
.zona i{width:26px;height:26px;display:block;border:1px solid rgba(0,0,0,.25)}
.zona[aria-pressed=true]{border:2px solid var(--almagra);font-weight:700;padding:4px 11px 4px 4px}
.color{width:44px;height:44px;padding:0;border:1px solid rgba(0,0,0,.25);cursor:pointer}
.color[aria-pressed=true]{outline:3px solid var(--tinta);outline-offset:2px}
.nombre-color{min-height:1.6em;margin:10px 0 0;font-style:normal;color:var(--tinta-suave)}

/* Formatos */
.formatos{padding:clamp(40px,6vw,88px) 0 0}
.formatos>header{padding:0 var(--margen);margin-bottom:32px}
.formatos>header h2{margin-bottom:.4em}
.formato{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;align-items:stretch;border-top:1px solid var(--junta)}
.formato>div:first-child{padding:24px var(--margen)}
.formato h3{margin-bottom:.35em}
.formato p{margin-bottom:.5em;font-size:1.0625rem}
.tira{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:var(--junta);align-content:start;padding:2px 0 2px 2px}
.tira img{width:100%;aspect-ratio:1;object-fit:cover}
.tira.hex{background:var(--cal);padding:16px 0;gap:0}
.tira.hex img{clip-path:polygon(27% 10%,73% 10%,96% 50%,73% 90%,27% 90%,4% 50%)}
.tira.lisa{grid-template-columns:repeat(9,1fr)}

/* Composición de una habitación */
.estancia{padding:clamp(40px,6vw,88px) var(--margen);display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.5fr);gap:32px 56px;align-items:start}
.estancia h2{margin-bottom:.4em}
.plano{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--junta);border:1px solid var(--junta)}
.plano img{width:100%;aspect-ratio:1}

/* Fabricación: aquí sí hay una secuencia, por eso va numerada */
.fabrica{background:var(--verde);color:#fff;padding:clamp(40px,6vw,88px) var(--margen);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px 56px}
.fabrica h2{margin-bottom:.5em}
.fabrica ol{list-style:none;counter-reset:paso;margin:0;padding:0}
.fabrica li{counter-increment:paso;display:grid;grid-template-columns:2.6rem 1fr;gap:0 8px;padding:12px 0;border-top:1px solid rgba(255,255,255,.3)}
.fabrica li::before{content:counter(paso);font:400 1.75rem/1.1 var(--serif);color:var(--ocre-claro)}
.fabrica li p{margin:0}
.fabrica a{color:#fff}
.fabrica a:hover{color:var(--ocre-claro)}
.fabrica figure{margin:0}
.fabrica img{width:100%;height:auto}
.fabrica figcaption{font-size:1rem;margin-top:8px;opacity:.9}
.fabrica 
.casa{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;background:var(--papel)}
.casa img{width:100%;height:100%;object-fit:cover}
.casa>div{padding:clamp(28px,5vw,72px) var(--margen)}
.casa h2{margin-bottom:.5em;font-size:clamp(1.75rem,2.8vw,2.5rem)}

.dudas{padding:clamp(40px,6vw,88px) var(--margen);max-width:60rem}
.dudas h2{margin-bottom:.6em}
.dudas details{border-top:1px solid var(--junta);padding:12px 0}
.dudas summary{font:400 1.3rem/1.25 var(--serif);cursor:pointer}
.dudas details p{margin:.6em 0 .2em}

.pedido{background:var(--papel);padding:clamp(40px,6vw,88px) var(--margen);display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.5fr);gap:32px 56px;scroll-margin-top:8px}
.pedido h2{margin-bottom:.5em}
address{font-style:normal}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-weight:500}
label.ancho,.acepto,.envio{grid-column:1/-1}
input,textarea,select{width:100%;font:inherit;padding:10px;background:#fff;border:1px solid var(--tinta-suave);color:var(--tinta);margin-top:4px;border-radius:0}
textarea{min-height:7em;resize:vertical}
.acepto{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.acepto input{width:auto;margin-top:6px}
#estado{grid-column:1/-1;margin:0;font-weight:700;color:var(--verde)}

.pie{padding:40px var(--margen);display:flex;flex-wrap:wrap;gap:24px 56px;font-size:1.05rem;border-top:1px solid var(--junta)}
.pie p{margin:0 0 .3em}
.pie .logos{margin-left:auto;align-self:center}
.pie .logos img{width:220px;height:auto}

/* Catálogo */
.vista{padding:clamp(24px,4vw,48px) var(--margen)}
.migas{font-size:1rem;margin-bottom:12px;color:var(--tinta-suave)}
.vista h1{font-size:clamp(2.25rem,4.5vw,4rem);margin-bottom:.35em}
.filtros{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 8px}
#cuenta{margin:12px 0 16px;color:var(--tinta-suave)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 2px;margin:0;padding:0;list-style:none}
.rejilla a{display:block;color:var(--tinta);text-decoration:none}
.rejilla a:hover strong{color:var(--almagra);text-decoration:underline}
.rejilla img{width:100%;aspect-ratio:1;object-fit:cover}
.rejilla .hexa img{clip-path:polygon(27% 10%,73% 10%,96% 50%,73% 90%,27% 90%,4% 50%)}
.rejilla strong{display:block;font-weight:500;padding:6px 6px 0}
.rejilla span{display:block;padding:0 6px;font-size:1rem;color:var(--tinta-suave)}

/* Ficha */
.ficha{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:32px 56px;align-items:start}
.ficha-img{width:100%;aspect-ratio:1;object-fit:cover}
.hexa-g{clip-path:polygon(27% 10%,73% 10%,96% 50%,73% 90%,27% 90%,4% 50%)}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:20px 0;max-width:36rem}
dt{font-weight:700}
dd{margin:0}
.repetido{height:clamp(200px,28vw,380px);margin-top:32px;background-size:clamp(70px,9vw,130px);background-repeat:repeat}
.combina{margin-top:32px}
.combina h2{font-size:1.75rem;margin-bottom:.5em}

@media (max-width:820px){
  .probador,.formato,.estancia,.fabrica,.casa,.pedido,.ficha{grid-template-columns:1fr}
  #muestra{max-width:280px}
  .tira{grid-template-columns:repeat(4,1fr);padding:0}
  .tira img:nth-child(n+9){display:none}
  .tira.lisa{grid-template-columns:repeat(6,1fr)}
  .tira.lisa img:nth-child(n+9){display:block}
  .tira.hex{grid-template-columns:repeat(6,1fr)}
  .formato>div:first-child{padding-bottom:12px}
  form{grid-template-columns:1fr}
  .pie .logos{margin-left:0}
  .fabrica figure{order:2}
}

/* Añadidos de producción */
.saltar{position:absolute;left:-999px;top:0;background:var(--tinta);color:#fff;padding:8px 12px;z-index:9}
.saltar:focus{left:8px;top:8px;color:#fff}
.tira a{display:block}
.tira.hex a img{clip-path:polygon(27% 10%,73% 10%,96% 50%,73% 90%,27% 90%,4% 50%)}
.texto>*{max-width:48rem}
.vista h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:1.2em 0 .5em}
.vista h3{margin:1em 0 .4em}
.vista ul:not(.rejilla),.vista ol{max-width:62ch}
.linea{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;max-width:48rem}
.linea dt{font:400 1.3rem/1.3 var(--serif);color:var(--almagra)}
.pedido-pagina{max-width:44rem;margin-top:16px}
.vista figure{margin:24px 0}
.vista figure img{width:100%;max-width:48rem}
.wpcf7 form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wpcf7 form p{margin:0;max-width:none}
.wpcf7 .ancho,.wpcf7 .envio,.wpcf7 .acepto-c,.wpcf7-response-output{grid-column:1/-1}
.wpcf7-not-valid-tip{display:block;color:var(--almagra);font-weight:500}
.wpcf7-response-output{margin:0;padding:10px;border:2px solid var(--verde)}
.wpcf7-spinner{display:none}
.wpcf7-list-item{margin:0}
.wpcf7-acceptance label{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.wpcf7-acceptance input{width:auto;margin-top:6px}
.screen-reader-response{position:absolute;left:-999px}
.wpcf7 input[type=submit]{width:auto;background:var(--almagra);color:#fff;border:2px solid var(--almagra);font-weight:700;padding:12px 20px;cursor:pointer}
.wpcf7 input[type=submit]:hover{background:var(--verde);border-color:var(--verde)}
.wpcf7 .hidden-fields-container{display:none}
.wpcf7 form.init .wpcf7-response-output{display:none}
.wpcf7 label{display:block}
@media (max-width:1179px){.suelo{flex-direction:column}.suelo-dibujo{aspect-ratio:3/1}}
@media (max-width:600px){.cabecera{gap:8px 16px;padding:10px var(--margen)}.menu{gap:2px 14px;font-size:1.05rem}.menu a{padding:2px 0}}
.casa img{max-height:640px}
@media (max-width:820px){.wpcf7 form{grid-template-columns:1fr}.casa img{max-height:360px}}