/*
Theme Name:   Matiz
Theme URI:    https://galeriadeartematiz.cl
Author:       Galería Matiz
Description:  Tema propio de Galería de Arte Matiz, Pucón. Obra original de Marcela Matus y Pablo Lopetegui. Sin dependencias, sin build step.
Version:      1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  matiz
Tags:         e-commerce, custom-menu, translation-ready
*/

/* ==========================================================================
   Tipografías. Autohospedadas, subconjunto latin (cubre U+0000-00FF, o sea
   ñ y todas las tildes). Cero peticiones a Google en tiempo de ejecución.
   Instrument Serif y Newsreader: OFL, vía Google Fonts.
   Sligoil: Ariel Martín Pérez / Velvetyne, licencia libre. Ver
   assets/fonts/SLIGOIL-LICENSE.txt.
   ========================================================================== */

@font-face{
	font-family:'Instrument Serif';
	src:url('assets/fonts/instrument-serif-400.woff2') format('woff2');
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Instrument Serif';
	src:url('assets/fonts/instrument-serif-400-italic.woff2') format('woff2');
	font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
	font-family:'Newsreader';
	src:url('assets/fonts/newsreader-400.woff2') format('woff2');
	font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Newsreader';
	src:url('assets/fonts/newsreader-400-italic.woff2') format('woff2');
	font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
	font-family:'Sligoil';
	src:url('assets/fonts/sligoil.woff2') format('woff2');
	font-weight:400; font-style:normal; font-display:swap;
}

/* ==========================================================================
   Tokens del sistema de diseño. Valores de DESIGN.md §5, §6 y §7.
   Los colores viven aquí y no en theme.json porque theme.json no sabe de
   modos: imprimiría el valor claro y pelearía con el modo oscuro.
   ========================================================================== */

:root{
	--muro:#F5F4F1;
	--papel:#FFFFFF;
	--tinta:#15181A;
	--tinta-suave:#5B6260;
	--acento:#14342B;
	--acento-tinta:#F1F3EE;
	--linea:rgba(21,24,26,.12);

	/* Tres capas: contacto duro, cuerpo y difusión larga. Es lo que despega
	   la obra del muro en vez de dejarla pegada como una calcomanía. */
	--sombra:0 1px 2px rgba(21,24,26,.24),
	         0 18px 34px -14px rgba(21,24,26,.36),
	         0 44px 84px -34px rgba(21,24,26,.30);

	/* Oregón teñido: promedio medido de los marcos reales de la galería. */
	--oregon-luz:#C55A40;
	--oregon:#B7523A;
	--oregon-canto:#A64B34;
	--oregon-sombra:#93412D;

	/* Los otros tres acabados. Nunca #000 ni #FFF: con el extremo puro el
	   bisel desaparece y la moldura queda como una silueta plana. Ver DESIGN.md
	   §5, donde consta que éstos se eligieron y el oregón se midió. */
	--negro-luz:#3C3A38;     --negro:#2E2C2B;     --negro-canto:#232120;     --negro-sombra:#171615;
	--blanco-luz:#EFEAE1;    --blanco:#E2DCD1;    --blanco-canto:#D0C9BC;    --blanco-sombra:#B9B1A3;
	--plateado-luz:#CFD2D4;  --plateado:#B7BBBE;  --plateado-canto:#A0A5A8;  --plateado-sombra:#868C90;

	/* El marco de una obra sin acabado declarado es de madera, que son 61 de
	   las 83: el respaldo es el caso común, no un color neutro inventado. */
	--marco-luz:var(--oregon-luz);
	--marco:var(--oregon);
	--marco-canto:var(--oregon-canto);
	--marco-sombra:var(--oregon-sombra);

	--titulo:'Instrument Serif',Georgia,serif;
	--lectura:'Newsreader',Georgia,serif;
	--dato:'Sligoil',ui-monospace,monospace;

	--e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:64px; --e7:88px;
	--ancho:1180px;
}

/* Modo oscuro: verde lago. Por ahora manda la preferencia del sistema; el
   interruptor visible llega en la Fase 3, cuando haya barra donde ponerlo. */
@media (prefers-color-scheme:dark){
	:root{
		--muro:#243733;
		--papel:#2C403B;
		--tinta:#EDEFEA;
		--tinta-suave:#A8B2AC;
		--acento:#E9EDE4;
		--acento-tinta:#16241F;
		--linea:rgba(237,239,234,.20);
		--sombra:0 1px 2px rgba(0,0,0,.5),
		         0 20px 38px -14px rgba(0,0,0,.6),
		         0 46px 90px -34px rgba(0,0,0,.55);
	}
}

/* ==========================================================================
   Base: retícula, tipografía aplicada, cabecera y pie.
   ========================================================================== */

*{box-sizing:border-box}

body{
	margin:0;
	background:var(--muro);
	color:var(--tinta);
	font-family:var(--lectura);
	font-size:17px;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}
/* <picture> es sólo un envoltorio para elegir formato: que no cuente en el
   layout, o el aspect-ratio del marco pasaría a aplicarse sobre él. */
picture{display:contents}
a{color:inherit}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--e4)}
@media (max-width:700px){ .contenedor{padding:0 var(--e3)} }

/* Enlace de salto: invisible hasta que el teclado lo enfoca. */
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:var(--e2);top:var(--e2);z-index:99;background:var(--papel);padding:var(--e2)}

h1,h2,h3{font-family:var(--titulo);font-weight:400;letter-spacing:-.01em;margin:0 0 var(--e3)}
h1{font-size:clamp(34px,5vw,56px);line-height:1.05}
h2{font-size:clamp(26px,3.5vw,38px);line-height:1.12}
h3{font-size:22px}
.prosa p{max-width:62ch}

.cabecera{padding:var(--e4) 0;border-bottom:1px solid var(--linea)}
.cabecera__fila{display:flex;align-items:baseline;gap:var(--e4);flex-wrap:wrap}
.marca{margin:0;font-family:var(--titulo);font-size:26px}
.marca a{text-decoration:none}

.nav{margin-left:auto}
.nav__lista{display:flex;gap:var(--e3);list-style:none;margin:0;padding:0;
	font-family:var(--dato);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav__lista a{text-decoration:none;padding-bottom:2px}
.nav__lista .current-menu-item > a{border-bottom:2px solid var(--acento)}

.carro{font-family:var(--dato);font-size:12px;letter-spacing:.14em;
	text-transform:uppercase;text-decoration:none;white-space:nowrap}

.contenido{padding:var(--e6) 0 var(--e7)}

.pie{border-top:1px solid var(--linea);padding:var(--e5) 0;color:var(--tinta-suave)}
.pie__fila{display:flex;gap:var(--e4);justify-content:space-between;flex-wrap:wrap}
.pie__linea,.pie__lista{font-family:var(--dato);font-size:11px;letter-spacing:.14em;
	text-transform:uppercase;margin:0}
.pie__lista{display:flex;gap:var(--e3);list-style:none;padding:0}
.pie__lista a{text-decoration:none}

@media (max-width:700px){
	.cabecera__fila{gap:var(--e2)}
	.nav{margin-left:0;width:100%}
	.nav__lista{flex-wrap:wrap;gap:var(--e2)}
}

/* ==========================================================================
   Catálogo a escala real. Un centímetro de obra son --u píxeles, así que un
   grabado de 25 cm se ve chico al lado de una pintura de 170. La moldura
   también va a escala: 4 cm de madera.
   ========================================================================== */

.products{
	--u:2.0px;
	list-style:none;margin:0;padding:0;
	display:flex;flex-wrap:wrap;align-items:flex-end;
	gap:var(--e6) var(--e5);
}
/* La unidad se elige para que la obra más grande del catálogo, de 200 cm,
   llene el ancho disponible sin desbordarlo. Bajarla más haría que una pintura
   de 90 cm se viera como una estampilla. */
@media (max-width:900px){ .products{--u:1.8px;gap:var(--e5) var(--e4)} }
@media (max-width:600px){ .products{--u:1.6px;gap:var(--e4) var(--e3)} }

/* La columna reserva el ancho que necesita la cartela; el marco, dentro, mide
   los centímetros reales. Así dos grabados chicos no se pisan los textos y la
   escala sigue siendo verdad.
   El selector es largo a propósito: la hoja de WooCommerce fija el ancho de
   cada tarjeta en 22,05% con `.woocommerce ul.products li.product`, y hay que
   ganarle en especificidad o todas las obras miden lo mismo. */
.woocommerce ul.products li.product.pieza,
ul.products li.product.pieza{
	flex:0 0 auto;
	float:none;
	width:max(150px, calc(var(--ancho-cm) * var(--u)));
	max-width:100%;
	margin:0;
}
.pieza__enlace{display:block;text-decoration:none}
.pieza .marco{
	width:calc(var(--ancho-cm) * var(--u));
	max-width:100%;
}

/* El marco: bordes CSS, que ingletean solos a 45° en las esquinas como uno
   armado en el taller. Cuatro tonos del acabado dan la luz desde arriba.
   La sombra interior es el rebaje donde apoya la tela. */
.marco{
	border-style:solid;
	border-width:calc(4 * var(--u));
	border-top-color:var(--marco-luz);
	border-left-color:var(--marco);
	border-right-color:var(--marco-canto);
	border-bottom-color:var(--marco-sombra);
	background:var(--papel);
	box-shadow:var(--sombra),
	           inset 0 3px 7px -2px rgba(0,0,0,.55),
	           inset 0 0 0 1px rgba(0,0,0,.28);
}
/* Cada acabado redefine los cuatro tonos y nada más: el resto del marco —el
   ancho, el inglete, el rebaje— es el mismo para todos. */
.marco--negro{
	--marco-luz:var(--negro-luz);  --marco:var(--negro);
	--marco-canto:var(--negro-canto);  --marco-sombra:var(--negro-sombra);
}
.marco--blanco{
	--marco-luz:var(--blanco-luz);  --marco:var(--blanco);
	--marco-canto:var(--blanco-canto);  --marco-sombra:var(--blanco-sombra);
}
.marco--plateado{
	--marco-luz:var(--plateado-luz);  --marco:var(--plateado);
	--marco-canto:var(--plateado-canto);  --marco-sombra:var(--plateado-sombra);
}
/* Sin marco es sin marco: ni moldura ni rebaje. La sombra exterior se queda,
   porque es lo que despega la obra del muro. */
.marco--sin-marco{
	border-width:0;
	box-shadow:var(--sombra);
}

/* El margen inferior es de WooCommerce, que le pone 1em a las imágenes de
   producto: dentro del marco se veía como una franja blanca bajo la obra. */
.woocommerce ul.products li.product .marco img,
.marco img{
	display:block;width:100%;height:auto;margin:0;
	aspect-ratio:var(--ancho-cm) / var(--alto-cm);
	object-fit:cover;
}

.cartela{margin-top:var(--e2)}
.cartela__titulo{
	font-family:var(--titulo);font-style:italic;font-size:19px;line-height:1.2;
	text-decoration:none;display:block;
}
.cartela__datos{
	font-family:var(--dato);font-size:11px;letter-spacing:.12em;
	text-transform:uppercase;color:var(--tinta-suave);margin:5px 0 0;
}
.cartela__precio{font-family:var(--titulo);font-size:19px;margin:3px 0 0}
.cartela__precio del{color:var(--tinta-suave);margin-right:8px;font-size:16px;text-decoration-thickness:1px}
.cartela__precio ins{text-decoration:none}
.cartela__vendida{
	display:inline-block;margin:6px 0 0;
	font-family:var(--dato);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
	padding:3px 8px;border:1px solid var(--linea);color:var(--tinta-suave);
}
.pieza--vendida .cartela__precio{color:var(--tinta-suave);text-decoration:line-through}

/* ==========================================================================
   Ficha de obra. Precio con el mismo cuerpo que el título: los dos datos que
   el visitante vino a buscar, antes del primer scroll.
   ========================================================================== */

.single-product .product_title{
	font-family:var(--titulo);font-style:italic;
	font-size:clamp(34px,4.4vw,46px);line-height:1.05;margin:0;
}
.ficha__cartela{
	font-family:var(--dato);font-size:12px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--tinta-suave);margin:16px 0 0;
}
.single-product .price{font-family:var(--titulo);font-size:clamp(34px,4.4vw,46px);line-height:1;margin:22px 0 0}
.single-product .price del{font-size:.7em;color:var(--tinta-suave);margin-right:12px;text-decoration-thickness:1px}
.single-product .price ins{text-decoration:none}

.ficha__tabla{width:100%;border-collapse:collapse;margin-top:40px;font-family:var(--dato);font-size:12px}
.ficha__tabla td{padding:11px 0;border-bottom:1px solid var(--linea);letter-spacing:.06em}
.ficha__tabla td:first-child{color:var(--tinta-suave);text-transform:uppercase;width:44%}
.ficha__notas{margin-top:var(--e3);color:var(--tinta-suave);font-size:15px}
.ficha__notas p{margin:0 0 var(--e1)}

.ficha__vendida{
	font-family:var(--dato);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
	border:1.5px solid var(--tinta);padding:19px 24px;text-align:center;margin:34px 0 0;
}
.single-product .woocommerce-product-gallery__image img{box-shadow:var(--sombra)}

/* La obra en la ficha lleva el mismo marco que en el catálogo. Aquí el ancho
   de moldura es fijo y no a escala: la ficha muestra la obra grande siempre,
   así que escalar la madera con los centímetros la haría desaparecer en un
   grabado chico. */
.single-product .woocommerce-product-gallery__image{
	border-style:solid;
	border-width:clamp(12px,2vw,24px);
	border-top-color:var(--oregon-luz);
	border-left-color:var(--oregon);
	border-right-color:var(--oregon-canto);
	border-bottom-color:var(--oregon-sombra);
	background:var(--papel);
	box-shadow:var(--sombra),
	           inset 0 3px 7px -2px rgba(0,0,0,.55),
	           inset 0 0 0 1px rgba(0,0,0,.28);
}
.single-product .woocommerce-product-gallery__image img{display:block;margin:0}

/* Botones dentro del sistema: el de compra es el único relleno de la página. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button{
	background:var(--acento);color:var(--acento-tinta);
	font-family:var(--dato);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
	font-weight:400;border-radius:0;border:1.5px solid var(--acento);
	padding:17px 26px;line-height:1;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover{background:transparent;color:var(--tinta);border-color:var(--tinta)}

.woocommerce .quantity input{
	font-family:var(--dato);border:1px solid var(--linea);border-radius:0;
	background:var(--papel);color:var(--tinta);padding:14px 8px;
}

/* Existencias y avisos, en voz baja. */
.woocommerce .stock,
.woocommerce div.product .stock{
	font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--tinta-suave);margin-top:var(--e2);
}

/* WooCommerce maqueta la ficha con float: la imagen a la izquierda y el
   resumen a la derecha. Los flotantes no los limpia nadie, así que la sección
   de obras relacionadas se encabalgaba encima. Se reemplaza por una grilla. */
.woocommerce div.product{
	display:grid;
	grid-template-columns:1.15fr 1fr;
	gap:var(--e6) var(--e6);
	align-items:start;
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images{float:none;width:auto;margin:0}
.woocommerce div.product div.summary{float:none;width:auto;margin:0}
.woocommerce div.product .related,
.woocommerce div.product .up-sells,
.woocommerce div.product .woocommerce-tabs{grid-column:1 / -1}
.woocommerce div.product .related h2{font-family:var(--titulo);font-weight:400}

@media (max-width:820px){
	.woocommerce div.product{grid-template-columns:1fr;gap:var(--e5)}
}

/* ==========================================================================
   Modo explícito. El atributo manda sobre la preferencia del sistema, así que
   quien elige, elige. Se repiten los valores en vez de reutilizar la media
   query porque una media query no se puede activar desde un atributo.
   ========================================================================== */

:root[data-modo="claro"]{
	--muro:#F5F4F1;
	--papel:#FFFFFF;
	--tinta:#15181A;
	--tinta-suave:#5B6260;
	--acento:#14342B;
	--acento-tinta:#F1F3EE;
	--linea:rgba(21,24,26,.12);
	--sombra:0 1px 2px rgba(21,24,26,.24),
	         0 18px 34px -14px rgba(21,24,26,.36),
	         0 44px 84px -34px rgba(21,24,26,.30);
}
:root[data-modo="oscuro"]{
	--muro:#243733;
	--papel:#2C403B;
	--tinta:#EDEFEA;
	--tinta-suave:#A8B2AC;
	--acento:#E9EDE4;
	--acento-tinta:#16241F;
	--linea:rgba(237,239,234,.20);
	--sombra:0 1px 2px rgba(0,0,0,.5),
	         0 20px 38px -14px rgba(0,0,0,.6),
	         0 46px 90px -34px rgba(0,0,0,.55);
}

.modo{
	background:none;border:1px solid var(--linea);color:var(--tinta);cursor:pointer;
	font-family:var(--dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
	padding:8px 12px;
}
.modo:hover{border-color:var(--tinta)}

/* La insignia de oferta de WooCommerce era un círculo amarillo que no está en
   la paleta y competía con la obra. No se restila: se quita. El precio tachado
   dice lo mismo, más bajito y sin inventar un color. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{display:none}

/* La lupa del zoom de WooCommerce, sin su fondo blanco de plugin. */
.woocommerce div.product .woocommerce-product-gallery__trigger{
	background:var(--papel);border-radius:0;box-shadow:none;border:1px solid var(--linea);
}