/* ==================================================================
   Personalización (Raúl, 01/10/2026, sobre el ejemplo «Colores a tu gusto»):
   «Pinta la web» en el pie, modo noche, el erizo que se sacude y papel «Marcada».
   Lo pinta assets/js/istrice-personaliza.js; lo elegido se recuerda en el navegador de cada visitante
   (localStorage, sin cookies). Antes de pintar, un script corto en <head> pone las clases y colores
   para que no parpadee (istrice-personaliza-temprano.js).
   ================================================================== */

:root {
	--istrice-pie: #233f25;          /* color del pie, sus olas y el aviso de cookies (accent-3 de siempre) */
	--istrice-pie-txt: #ffffff;      /* letras del pie: blancas, u oscuras si el color elegido es claro */
	--istrice-pie-hover: var(--wp--preset--color--accent-5);
	--istrice-tinta: #233f25;        /* tinta de la estela del puntero */
	/* Papel «Marcada» (Raúl: «quizás la marcada»): grano de papel sobre el crema */
	--istrice-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 .34 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Papel ---------- */
body,
.has-base-background-color { background-image: var(--istrice-papel); background-size: 200px 200px; }

/* ---------- Pinta la web: pie, olas y aviso de cookies ---------- */
.istrice-footer.has-background { background-color: var(--istrice-pie) !important; color: var(--istrice-pie-txt) !important; transition: background-color .3s, color .3s; }
.istrice-footer .has-white-color,
.istrice-footer a,
.istrice-footer h2,
.istrice-footer h3,
.istrice-footer p { color: var(--istrice-pie-txt) !important; }
.istrice-footer a:hover { color: var(--istrice-pie-hover) !important; }
html.istrice-pie-subraya .istrice-footer a:hover { text-decoration: underline; }
.istrice-footer__social .wp-social-link { border-color: color-mix(in srgb, var(--istrice-pie-txt) 22%, transparent) !important; }
.istrice-footer__social .wp-social-link svg { fill: var(--istrice-pie-txt) !important; }
.istrice-footer__social .wp-social-link:hover { background: color-mix(in srgb, var(--istrice-pie-txt) 10%, transparent) !important; }
.istrice-footer__bottom { border-top-color: color-mix(in srgb, var(--istrice-pie-txt) 15%, transparent) !important; }
.istrice-newsletter .wpcf7-response-output { color: var(--istrice-pie-txt) !important; }

/* Las olas se recortan con una máscara y se rellenan con el color elegido (antes eran un dibujo verde). */
.istrice-footer::before {
	background: var(--istrice-pie) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60' preserveAspectRatio='none'%3E%3Cpath d='M0,36 Q45,14 90,36 T180,36 L180,60 L0,60 Z'/%3E%3C/svg%3E") repeat-x 0 100% / 160px 60px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60' preserveAspectRatio='none'%3E%3Cpath d='M0,36 Q45,14 90,36 T180,36 L180,60 L0,60 Z'/%3E%3C/svg%3E") repeat-x 0 100% / 160px 60px;
	animation: istrice-olas-mascara 1.8s linear infinite !important;
	transition: background-color .3s;
}
@keyframes istrice-olas-mascara { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: -160px 100%; mask-position: -160px 100%; } }
@keyframes istrice-olas-mascara-movil { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: -110px 100%; mask-position: -110px 100%; } }
@media (max-width: 781px) {
	.istrice-footer::before { -webkit-mask-size: 110px 42px; mask-size: 110px 42px; animation-name: istrice-olas-mascara-movil !important; animation-duration: 1.25s !important; }
}
@media (prefers-reduced-motion: reduce) { .istrice-footer::before { animation: none !important; } }

.istrice-cookies { background: var(--istrice-pie) !important; color: var(--istrice-pie-txt) !important; }
.istrice-cookies__boton:focus-visible { outline-color: var(--istrice-pie-txt) !important; }

/* La barra de colores, en la línea de abajo del pie (Raúl: «mejor ponerla abajo»: así se ve lo que cambia) */
.istrice-pinta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--wp--preset--font-family--outfit); font-size: 0.8125rem; }
.istrice-pinta__texto { opacity: .9; }
.istrice-pinta__muestras { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0; padding: 0; }
.istrice-pinta__muestra,
.istrice-pinta__otro { position: relative; box-sizing: border-box; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.istrice-pinta__muestra[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--istrice-pie-txt); }
.istrice-pinta__otro { display: block; overflow: hidden; margin: 0 !important; background: conic-gradient(#e34, #fb3, #4c7, #39f, #a4e, #e34); }
.istrice-pinta__otro input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; -webkit-appearance: none; appearance: none; }
.istrice-pinta__muestra:focus-visible,
.istrice-pinta__otro:focus-within { outline: 2px solid var(--istrice-pie-txt); outline-offset: 2px; }

/* ---------- El erizo se sacude al pasar el ratón por el logo ---------- */
.istrice-header__logo img { transform-origin: 20% 80%; }
.istrice-header__logo a:hover img,
.istrice-header__logo img.istrice-sacude { animation: istrice-erizo .9s ease-in-out; }
@keyframes istrice-erizo {
	0%, 100% { transform: rotate(0) scale(1); }
	15% { transform: rotate(-12deg) scale(1.08); }
	30% { transform: rotate(10deg) scale(1.08); }
	45% { transform: rotate(-8deg) scale(1.05); }
	60% { transform: rotate(6deg); }
	75% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .istrice-header__logo img { animation: none !important; } }

/* ---------- Modo noche: la luna junto a «ES · EN» ---------- */
.istrice-luna { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--wp--preset--color--contrast); cursor: pointer; }
.istrice-luna svg { width: 19px; height: 19px; }
.istrice-luna:hover { color: var(--wp--preset--color--accent-5); }
.istrice-luna:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }
.istrice-luna .istrice-luna__sol { display: none; }
/* En el móvil no cabe en la cabecera (el logo se encogía): va dentro del menú de tres rayas, con su nombre. */
.istrice-luna--menu { display: none; }
@media (max-width: 699px) {
	.istrice-header__icons .istrice-luna { display: none; }
	.istrice-header__menu .is-menu-open .istrice-luna--menu { display: inline-flex; width: auto; height: auto; gap: 8px; margin-top: 18px; padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 500; }
}
/* En el pie, junto a «Pinta la web»: modo noche y «Parar animaciones», como texto con su icono (Raúl, 04/10/2026) */
.istrice-ajustes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; }
@media (min-width: 782px) { .istrice-ajustes { margin-left: 14px; } }
.istrice-footer .istrice-luna--pie, .istrice-footer .istrice-parar { display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-family: var(--wp--preset--font-family--outfit); font-size: 0.8125rem; line-height: 1.4; cursor: pointer; }
.istrice-footer .istrice-luna--pie svg, .istrice-footer .istrice-parar svg { width: 16px; height: 16px; flex: none; }
.istrice-footer .istrice-luna--pie:hover, .istrice-footer .istrice-parar:hover { color: var(--istrice-pie-hover); }
html.istrice-pie-subraya .istrice-footer .istrice-luna--pie:hover, html.istrice-pie-subraya .istrice-footer .istrice-parar:hover { text-decoration: underline; }
.istrice-footer .istrice-luna--pie:focus-visible, .istrice-footer .istrice-parar:focus-visible { outline: 2px solid var(--istrice-pie-txt); outline-offset: 3px; }
.istrice-parar .istrice-parar__play { display: none; }
html.istrice-quieto .istrice-parar .istrice-parar__pausa { display: none; }
html.istrice-quieto .istrice-parar .istrice-parar__play { display: block; }
/* «Parar animaciones»: nada se mueve solo (olas, erizo, etiquetas…); el vídeo y la estela los para el script. */
html.istrice-quieto *, html.istrice-quieto *::before, html.istrice-quieto *::after { animation: none !important; }
html.istrice-noche .istrice-luna .istrice-luna__sol { display: block; }
html.istrice-noche .istrice-luna .istrice-luna__luna { display: none; }

html.istrice-noche {
	color-scheme: dark;
	--wp--preset--color--base: #1d1f2b;
	--wp--preset--color--contrast: #eeeadb;
	--wp--preset--color--accent-2: #8fd3a0;
	--wp--preset--color--accent-4: #c4c0b2;
	--wp--preset--color--accent-6: #34374a;
	--wp--preset--color--rosa-claro: #4b3640;
	--istrice-tinta: #eeeadb;
	--istrice-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0 0.85 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.istrice-noche body { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
html.istrice-noche .istrice-header__logo img { filter: invert(.93) sepia(.08); }
html.istrice-noche :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--contrast); }
html.istrice-noche :where(a:not([class*="button"]):not(.wp-element-button)) { color: inherit; }
html.istrice-noche .istrice-lang__sep { color: #6c6f80; }
/* Campos de formulario, desplegables y cajas que vienen blancas de WooCommerce */
html.istrice-noche :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="password"], input[type="url"], textarea, select):not(.istrice-newsletter *):not(.istrice-pinta *):not(.istrice-formulario *):not(.istrice-buscar *):not(.woocommerce-ordering *) {
	background-color: #2a2d3c !important; color: var(--wp--preset--color--contrast) !important; border-color: #4a4e63 !important;
}
html.istrice-noche ::placeholder { color: #9a96a8 !important; }
/* Cantidad de la ficha (− 1 +), que es una caja blanca */
html.istrice-noche .istrice-qty { background-color: #2a2d3c !important; border-color: #4a4e63 !important; }
html.istrice-noche .istrice-qty :is(input, button) { background: transparent !important; color: var(--wp--preset--color--contrast) !important; }
html.istrice-noche :where(.wc-block-components-text-input input, .wc-block-components-textarea, .wc-blocks-components-select__select, .wc-block-components-combobox .components-combobox-control__input) {
	background-color: #2a2d3c !important; color: var(--wp--preset--color--contrast) !important;
}
html.istrice-noche :where(.wc-block-components-text-input label, .wc-blocks-components-select__label) { color: #c4c0b2 !important; }
html.istrice-noche :where(.wc-block-mini-cart__drawer .components-modal__content, .wc-block-components-drawer, .wp-block-navigation__responsive-container.is-menu-open, .wc-block-components-panel, .woocommerce-message, .woocommerce-info) {
	background-color: #24273a !important; color: var(--wp--preset--color--contrast) !important;
}
html.istrice-noche .wp-block-navigation__responsive-container.is-menu-open :where(a, button) { color: var(--wp--preset--color--contrast) !important; }
html.istrice-noche .istrice-header__menu .wp-block-navigation__submenu-container { background: #24273a !important; color: var(--wp--preset--color--contrast) !important; box-shadow: 0 6px 20px rgba(0,0,0,.35) !important; }
html.istrice-noche .istrice-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); }
html.istrice-noche .istrice-header__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent-5); }
html.istrice-noche .istrice-header__menu .wp-block-navigation-item__content:hover,
html.istrice-noche .istrice-header__menu .current-menu-item > .wp-block-navigation-item__content,
html.istrice-noche .istrice-header__menu .current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent-5); } /* de noche el teja no se lee (2,9 : 1): naranja, 8,5 : 1 */
html.istrice-noche :where(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info, .woocommerce-error) { background-color: #24273a !important; color: var(--wp--preset--color--contrast) !important; border-color: #4a4e63 !important; }
html.istrice-noche .wc-block-components-notice-banner a { color: var(--wp--preset--color--contrast) !important; }
html.istrice-noche :where(.wc-block-components-product-price, .woocommerce-Price-amount) { color: var(--wp--preset--color--accent-2); }
html.istrice-noche :where(hr, .wp-block-separator) { border-color: #34374a; color: #34374a; }
html.istrice-noche :where(table, th, td) { border-color: #34374a; }
html.istrice-noche .wp-block-calendar :where(th, caption) { background: #2a2d3c !important; color: var(--wp--preset--color--contrast) !important; }
html.istrice-noche .wp-block-calendar :where(table, td, a) { color: var(--wp--preset--color--contrast); }
html.istrice-noche .wp-block-post-excerpt__more-link { background: transparent !important; color: var(--wp--preset--color--contrast) !important; border-color: var(--wp--preset--color--contrast) !important; }
html.istrice-noche .wp-block-post-excerpt__more-link:hover { background: var(--wp--preset--color--contrast) !important; color: var(--wp--preset--color--base) !important; }
html.istrice-noche svg:not(.istrice-footer svg):not(.istrice-pared svg) { color: inherit; }

/* ---------- «Pruébala en tu pared» (ficha de cada lámina; lo monta assets/js/istrice-pared.js) ---------- */
.istrice-pared-ancla { position: relative; }
.istrice-pared-abierta .woocommerce-product-gallery__trigger { display: none !important; } /* la lupa abriría la foto, no la pared */
.istrice-pared { position: absolute; inset: 0; z-index: 5; background: #e9e7e2; overflow: hidden; }
.istrice-pared[hidden] { display: none; }
.istrice-pared canvas { display: block; width: 100%; height: 100%; }
.istrice-pared__credito { position: absolute; right: 8px; bottom: 6px; margin: 0; font-size: 10px; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.istrice-pared-barra { clear: both; width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 0; font-family: var(--wp--preset--font-family--outfit); font-size: 0.875rem; color: var(--wp--preset--color--contrast); }
.istrice-pared-barra[hidden] { display: none; }
.istrice-pared-boton { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--wp--preset--color--contrast); border-radius: 999px; background: transparent; color: var(--wp--preset--color--contrast); font: inherit; font-weight: 500; cursor: pointer; }
.istrice-pared-boton svg { width: 18px; height: 18px; }
.istrice-pared-boton:hover,
.istrice-pared-boton[aria-pressed="true"] { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.istrice-pared-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.istrice-pared-opciones[hidden] { display: none; }
.istrice-pared-chip { padding: 5px 12px; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.istrice-pared-chip[aria-pressed="true"] { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.istrice-pared-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; cursor: pointer; }
.istrice-pared-tam { flex-basis: 100%; margin: 0; font-size: 0.8125rem; color: var(--wp--preset--color--accent-4); }
.istrice-pared-check[hidden] { display: none; }
.istrice-pared-aviso { flex-basis: 100%; margin: 0; font-size: 0.8125rem; color: var(--wp--preset--color--contrast); }
.istrice-pared-boton:focus-visible,
.istrice-pared-chip:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }

/* Modo noche: lo que lleva letra o fondo «contrast» sobre blanco o rosa. De noche «contrast» es claro, así que
   aquí se fija el negro de siempre para que se siga leyendo. */
html.istrice-noche :is(.wp-element-button:not(.wp-block-search__button), .wp-block-button__link, .woocommerce .button, .woocommerce button.button,
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
main .wpcf7 input[type="submit"], .wc-block-grid__product-add-to-cart .wp-block-button__link) { color: #181818 !important; }
html.istrice-noche :is(.wp-element-button:not(.wp-block-search__button), .wp-block-button__link, .woocommerce .button, .woocommerce button.button,
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
main .wpcf7 input[type="submit"], .wc-block-grid__product-add-to-cart .wp-block-button__link):hover { background: #eeeadb !important; color: #181818 !important; }
/* Botones de solo borde (p. ej. «Sígueme en Instagram»): de noche, borde y letra claros (más fuerte que la regla de arriba) */
html.istrice-noche .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button,
html.istrice-noche .istrice-instagram .istrice-instagram__follow .wp-block-button__link.wp-element-button { background: transparent !important; color: var(--wp--preset--color--contrast) !important; border-color: var(--wp--preset--color--contrast) !important; }
html.istrice-noche .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
html.istrice-noche .istrice-instagram .istrice-instagram__follow .wp-block-button__link.wp-element-button:hover { background: var(--wp--preset--color--contrast) !important; color: var(--wp--preset--color--base) !important; }
html.istrice-noche .istrice-cookies__boton--no { color: #181818 !important; }
html.istrice-noche .istrice-cookies__boton:hover { background: #181818 !important; color: #ffffff !important; }
html.istrice-noche .istrice-social-squares .wp-social-link:hover { background: #eeeadb !important; color: #181818 !important; }
html.istrice-noche :is(.istrice-sidebar__search .wp-block-search__inside-wrapper, .istrice-sidebar__archives select, .wp-block-archives-dropdown select) { background: #2a2d3c !important; color: var(--wp--preset--color--contrast) !important; border-color: #4a4e63 !important; }

/* ---------- «Web hecha por Istrice Studio» en la línea de abajo del pie (Raúl, 01/10/2026), con el logo de Studio
   y su ojito: el punto de la «i» se abre, parpadea y mira al ratón, como en la portada de Istrice Studio. ---------- */
/* Línea de abajo del pie (Raúl, 01–02/10/2026): copyright a la izquierda y «Web de Istrice Studio» a la derecha; debajo,
   «Pinta la web» a la izquierda y, abajo a la derecha y muy pequeña, «Primera web realizada por PixelImperium». */
.istrice-footer__bottom { display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 10px 24px; }
.istrice-footer__bottom > * { margin: 0 !important; }
.istrice-footer__bottom > p:first-child { grid-column: 1; grid-row: 1; }
.istrice-hecha { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--outfit); font-size: 0.8125rem; color: var(--istrice-pie-txt); cursor: default; }
.istrice-hecha a { color: inherit !important; display: inline-flex; }
.istrice-footer__bottom .istrice-pinta { grid-column: 1; grid-row: 2; justify-content: flex-start; }
.istrice-footer .istrice-pixel { grid-column: 2; grid-row: 2; justify-self: end; font-family: var(--wp--preset--font-family--outfit); font-size: 10px; line-height: 1.3; letter-spacing: .02em; opacity: .7; }
.istrice-footer .istrice-pixel a { text-decoration: none; } /* Raúl: «solo un texto con link y punto», sin resaltar */
.istrice-studio { position: relative; display: inline-block; width: 112px; aspect-ratio: 505 / 195; color: inherit; }
.istrice-studio__logo { position: absolute; inset: 0; background: currentColor;
	-webkit-mask: var(--istrice-studio-logo) no-repeat center / contain; mask: var(--istrice-studio-logo) no-repeat center / contain; }
/* El ojo no está hasta que el ratón pasa por el logo: entonces sale grande (tres veces el punto de la «i») */
.istrice-studio__ojo { position: absolute; z-index: 2; left: 62.4%; top: 9.49%; width: 6.34%; aspect-ratio: 1; border-radius: 50%; background: #fff6e5;
	box-shadow: 0 0 0 .35px currentColor, 0 1px 3px rgba(0,0,0,.25); transform: translate(-50%, -50%) scale(.2); opacity: 0; overflow: hidden; pointer-events: none;
	transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), top .28s cubic-bezier(.34, 1.56, .64, 1), opacity .14s ease; }
.istrice-studio__pupila { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; border-radius: 50%; background: #1d1d1b;
	transform: translate(calc(-50% + var(--mira-x, 0px)), calc(-50% + var(--mira-y, 0px))); transition: transform .08s linear; }
/* Raúl: «cuando se hace grande no puede tapar la i»: sube hasta apoyarse encima del palito (que empieza al 19,5 %) */
.istrice-hecha.is-mirando .istrice-studio__ojo { top: -5.5%; opacity: 1; transform: translate(-50%, -50%) scale(3); }
@media (prefers-reduced-motion: reduce) { .istrice-studio__ojo, .istrice-studio__pupila { transition: none; } }
@media (max-width: 781px) {
	.istrice-footer__bottom { grid-template-columns: 1fr; justify-items: start; }
	.istrice-hecha { grid-column: 1; grid-row: 2; justify-self: start; }
	.istrice-footer .istrice-pixel { grid-column: 1; grid-row: 3; justify-self: start; }
	.istrice-footer__bottom .istrice-pinta { grid-column: 1; grid-row: 4; }
}

/* ---------- Mosaico de trabajos: recuadros de relleno para que abajo cierre recto (assets/js/istrice-mosaico.js).
   Solo texto: frases de Andrea o palabras suyas sueltas (Raúl: «no quiero meter imágenes»). ---------- */
/* El script pasa los trabajos a columnas fijas, por filas (el 1, el 2 y el 3 arriba); sin el script, columnas de CSS */
.istrice-mosaic--cajas { column-count: auto !important; display: flex; align-items: flex-start; }
/* Trabajo a todo el ancho (casilla «Ocupar todo el ancho» de su ficha): cruza las columnas; sin el script, lo hace el
   propio CSS (column-span). Con el script, el mosaico se parte en tramos de columnas encima y debajo de él. */
.istrice-mosaic .istrice-tile--ancho { column-span: all; }
.istrice-mosaic.istrice-mosaic--tramos { column-count: auto !important; }
.istrice-mosaic__tramo { column-count: var(--istrice-mosaic-columns); column-gap: var(--istrice-mosaic-gap); line-height: 0; }
.istrice-mosaic__col { flex: 1 1 0; min-width: 0; }
.istrice-relleno { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin: 0; padding: 24px 28px; container-type: inline-size;
	overflow: hidden; break-inside: avoid; background-image: var(--istrice-papel); background-size: 200px 200px; }
.istrice-relleno p { margin: 0; max-width: 18ch; font-family: var(--wp--preset--font-family--bright, Georgia, serif); line-height: 1.15; text-align: center; text-wrap: balance; }
.istrice-relleno--frase p { font-size: clamp(22px, 7cqi, 38px); }
.istrice-relleno--palabra p { font-size: clamp(26px, 10cqi, 52px); letter-spacing: .01em; }

/* Reseñas de la tienda (las 9 de los retratos, traídas de la web vieja el 02/10/2026): sin el cuadrado vacío de la foto
   de cada persona (nadie tiene foto) y el texto ocupando su sitio. */
html .woocommerce #reviews #comments ol.commentlist li img.avatar { display: none; }
html .woocommerce #reviews #comments ol.commentlist li .comment-text { margin-left: 0; }

/* El desplegable del menú (Tienda ▾) por encima del contenido de la página. Raúl (04/10/2026), en la ficha de Akelarre:
   «me pongo con el mouse encima de Tienda y la lupa me queda por delante del desplegable». WordPress le da nivel 2 y
   la lupa de la galería de WooCommerce tiene 99. Con 1000 queda por encima de ella y de «Pruébala en tu pared» (5), y
   por debajo del visor de fotos (1500), el carrito lateral (9999) y el aviso de cookies. */
.wp-block-navigation.istrice-header__menu .has-child .wp-block-navigation__submenu-container { z-index: 1000; }

/* Vídeo de un trabajo parado: botón redondo en el centro para verlo (Raúl, 05/10/2026; ver istrice-personaliza.js) */
.istrice-work__image { position: relative; }
.istrice-ver-video { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(24, 24, 24, 0.72); color: #fff; cursor: pointer; place-items: center; transition: background-color 0.2s; }
.istrice-ver-video svg { width: 30px; height: 30px; margin-left: 4px; }
.istrice-work__image.is-parado .istrice-ver-video { display: grid; }
.istrice-ver-video:hover { background: rgba(24, 24, 24, 0.88); }
.istrice-ver-video:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(24, 24, 24, 0.6); }