/*!
 * Sils Addons — «Personaliza tu obra» (maquetación Resumen, estilo Suave).
 *
 * Todo lo ajustable desde la plantilla sin tocar el plugin está en variables CSS
 * (--sils-*). Ejemplo, en el CSS personalizado de la plantilla:
 *   .sils-sel, .sils-res { --sils-radio: 6px; --sils-sticky-top: 140px; }
 *
 * La columna (borde izquierdo, relleno, galería fija) es de la plantilla;
 * aquí solo va lo que pinta el plugin.
 *
 * Colores y tipografías con las variables del sistema (--sils-*: paleta «Cuadros Sils» de
 * Bricks), cada una con el valor que tiene hoy de respaldo, por si una página no las
 * carga. Hasta el 1-oct-2026 se leían las del kit de Elementor (--e-global-*).
 *
 * @package SilsAddons
 */

/* Colores: SOLO variables del sistema. Los grises que la paleta no tiene se derivan
   mezclando dos de sus colores, así que cambian si cambia la paleta. */
.sils-sel, .sils-res, .sils-barra, .sils-compos, .sils-precio, .sils-compo-ficha {
	--sils-radio: 4px;
	/* --sils-blanco, --sils-texto y --sils-transparente son las del sistema (paleta de Bricks). */
	--sils-negro: var(--sils-principal, #000000);
	--sils-gris: var(--sils-secundario, #6B6B6B);
	--sils-borde-sel: var(--sils-secundario, #6B6B6B);
	--sils-fondo-img: var(--sils-fondo-imagenes, #EEEEEE);
	--sils-linea: var(--sils-fondo-imagenes, #EEEEEE);
	--sils-reposo: var(--sils-gris-claro, #F8F8F8);
	--sils-verde: var(--sils-verde-confianza, #3E5F46);
	--sils-fantasma: color-mix(in srgb, var(--sils-secundario, #6B6B6B) 12%, var(--sils-blanco, #FFFFFF));
	--sils-borde: color-mix(in srgb, var(--sils-secundario, #6B6B6B) 26%, var(--sils-blanco, #FFFFFF));
	--sils-hover: color-mix(in srgb, var(--sils-secundario, #6B6B6B) 42%, var(--sils-blanco, #FFFFFF));
	--sils-apagado: color-mix(in srgb, var(--sils-secundario, #6B6B6B) 55%, var(--sils-blanco, #FFFFFF));
	--sils-inactivo: color-mix(in srgb, var(--sils-secundario, #6B6B6B) 70%, var(--sils-blanco, #FFFFFF));
	--sils-texto-suave: color-mix(in srgb, var(--sils-texto, #2C2C2C) 75%, var(--sils-blanco, #FFFFFF));
	--sils-negro-hover: color-mix(in srgb, var(--sils-principal, #000000) 86%, var(--sils-blanco, #FFFFFF));
	--sils-sombra-sel: 0 2px 8px color-mix(in srgb, var(--sils-principal, #000000) 7%, transparent);
	--sils-boton: var(--sils-negro);
	--sils-boton-texto: var(--sils-blanco);
	--sils-sticky-top: 100px;
	color: var(--sils-texto);
}
.sils-sel *, .sils-res *, .sils-barra *, .sils-compos *, .sils-compo-ficha * { box-sizing: border-box; }

/* Neutraliza los estilos globales de botones del tema y del kit de Elementor
   (fondo, borde negro, radio 50px, rosa al pasar el ratón). */
:is(.sils-sel, .sils-res, .sils-barra, .sils-compos, .sils-compo-ficha) :is(button, button:hover, button:focus, button:active) {
	background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0;
	color: inherit; font: inherit; text-transform: none; letter-spacing: inherit; line-height: 1.2;
	white-space: normal; min-height: 0; width: auto; transition: none; text-decoration: none;
}
:is(.sils-sel, .sils-res, .sils-barra, .sils-compos, .sils-compo-ficha) button:focus-visible { outline: 2px solid var(--sils-texto); outline-offset: 2px; }

/* ── Piezas comunes ─────────────────────────────────────────────────── */
/* Titulillos (selectores, resumen, composición): tipografía global «NUEVO Mini titulo». */
.sils-cap {
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif; font-size: var(--sils-txt-3xs, 12px);
	font-weight: 300; text-transform: uppercase;
	line-height: 12px; letter-spacing: var(--sils-ls-etiqueta, .15em);
	color: var(--sils-gris); margin: 0;
}
.sils-valor { font-size: var(--sils-txt-2xs, 14px); font-weight: 500; color: var(--sils-texto); }
.sils-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sils-esp-2xs, 8px); margin-bottom: 10px; min-height: 16px; }
:is(.sils-sel, .sils-res) button.sils-ayuda {
	display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--sils-texto);
	border-radius: 50%; font-size: var(--sils-txt-4xs, 11px); line-height: 1; font-weight: 500; cursor: pointer; position: relative; flex: 0 0 auto;
	background: transparent; color: var(--sils-texto); transition: background-color .15s ease, color .15s ease;
}
/* Abierta: el «?» se rellena para que se vea de quién es el globo. */
:is(.sils-sel, .sils-res) button.sils-ayuda[aria-expanded="true"] {
	background: var(--sils-texto); color: var(--sils-blanco);
}
/* El globo (assets/front/js/ayuda.js): uno solo en <body>, fijo a la pantalla y colocado
   por el guion encima o debajo del «?»; la flecha apunta a él (--flecha). */
.sils-globo {
	position: fixed; top: 0; left: 0; z-index: 1000; box-sizing: border-box;
	width: min(320px, calc(100vw - 24px)); padding: var(--sils-esp-s, 16px);
	background: var(--sils-blanco, #FFFFFF); color: var(--sils-texto, #2C2C2C);
	/* Como «tipo-texto-pequeño» de la web: 14 px, 300 y 1,2 px entre letras (Thoren fina se
	   apelmaza sin espaciado). */
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif; font-size: var(--sils-txt-2xs, 14px); line-height: 1.45; font-weight: 300;
	/* pre-line: los saltos de línea del texto separan párrafos (la ayuda de «Adaptación»). */
	text-transform: none; letter-spacing: var(--sils-ls-texto, 1.2px); text-align: left; white-space: pre-line; border-radius: var(--sils-radio, 4px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--sils-principal, #000000) 20%, transparent);
	opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.sils-globo strong { font-weight: 500; } /* Thoren solo tiene 300 y 500. */
.sils-globo[data-lado="abajo"] { transform: translateY(-4px); }
.sils-globo.is-visible { opacity: 1; transform: none; }
.sils-globo::before {
	content: ''; position: absolute; left: var(--flecha, 50%); width: 10px; height: 10px;
	background: inherit; transform: translateX(-50%) rotate(45deg);
}
.sils-globo[data-lado="arriba"]::before { bottom: -5px; box-shadow: 3px 3px 4px color-mix(in srgb, var(--sils-principal, #000000) 8%, transparent); }
.sils-globo[data-lado="abajo"]::before { top: -5px; }
@media (prefers-reduced-motion: reduce) {
	.sils-globo { transition: none; }
}

/* ── Selectores ─────────────────────────────────────────────────────── */
.sils-paso { margin-top: 22px; }
.sils-paso:first-child { margin-top: 0; }
/* La caja de personalización como paso: solo la enseña el configurador del móvil (su
   última pestaña, ver configurador-movil.css); en escritorio va en el resumen. */
.sils-sel .sils-paso--perso { display: none; }
.sils-opciones { display: flex; flex-wrap: wrap; gap: var(--sils-esp-2xs, 8px); position: relative; }

/* «Restablecer selección» y «Ver composición» comparten estilo: el primero parte de gris y
   se oscurece; el segundo parte de negro y se aclara. */
.sils-sel button.sils-reset, .sils-compo a.sils-compo__enlace {
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif; font-size: var(--sils-txt-3xs, 12px); font-weight: 300;
	text-transform: none; letter-spacing: var(--sils-ls-texto, .12rem); line-height: 1.2; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .2s ease;
}
.sils-sel button.sils-reset { color: var(--sils-gris); margin-left: 6px; }
.sils-sel button.sils-reset:hover { color: var(--sils-texto); text-decoration: underline; }
.sils-compo a.sils-compo__enlace { display: inline-block; margin-top: var(--sils-esp-3xs, 4px); color: var(--sils-texto); }
.sils-compo a.sils-compo__enlace:hover { color: var(--sils-gris); }

/* Opción con imagen o color */
.sils-sel button.sils-op { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 50px; cursor: pointer; }
.sils-op__caja {
	width: 48px; height: 48px; display: grid; place-items: center; background: var(--sils-reposo);
	border: 1px solid transparent; border-radius: var(--sils-radio); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.sils-op__caja img { width: 42px; height: 42px; object-fit: cover; display: block; border-radius: 2px; }
.sils-op__nombre { font-size: var(--sils-txt-3xs, 12px); white-space: nowrap; font-weight: 300; }
.sils-opciones--acabado .sils-op__caja { width: 62px; height: 62px; }
.sils-opciones--acabado .sils-op__caja img { width: 52px; height: 52px; object-fit: contain; border-radius: 0; }
.sils-op__color { width: 30px; height: 30px; display: block; border: 1px solid color-mix(in srgb, var(--sils-negro) 10%, transparent); border-radius: 2px; }
.sils-sel button.sils-op:hover .sils-op__caja { border-color: var(--sils-hover); }
.sils-sel button.sils-op[aria-pressed="true"] .sils-op__caja { background: var(--sils-blanco); border-color: var(--sils-borde-sel); box-shadow: var(--sils-sombra-sel); }

/* Medida: botón de texto con el mismo lenguaje */
.sils-sel button.sils-medida {
	min-width: 62px; padding: 10px 11px; font-size: var(--sils-txt-3xs, 12px); line-height: 1; text-align: center; cursor: pointer;
	background: var(--sils-reposo); border: 1px solid transparent; border-radius: var(--sils-radio); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.sils-sel button.sils-medida:hover { border-color: var(--sils-hover); background: var(--sils-reposo); }
.sils-sel button.sils-medida[aria-pressed="true"] { background: var(--sils-blanco); border-color: var(--sils-borde-sel); box-shadow: var(--sils-sombra-sel); }

/* Marco + paspartú / soporte en una línea si caben; si no, se apilan solos */
.sils-duo { display: flex; flex-wrap: wrap; gap: 22px 24px; margin-top: 22px; }

/* Los rótulos de los pasos, en negro, como los títulos de la ficha («Sobre la obra», clase
   tipo-nuevo-mini-titulo de Bricks): mandan sobre el valor elegido (8-oct-2026). Los del
   resumen siguen en gris. */
.sils-sel .sils-cabecera > .sils-cap { color: var(--sils-negro); letter-spacing: var(--sils-ls-etiqueta, .15em); }

/* Lámina: pasos desactivados con aviso */
.sils-sel .is-off .sils-cap { color: var(--sils-apagado); }
.sils-sel .is-off .sils-opciones > * { opacity: .45; }
.sils-sel .is-off .sils-opciones[data-aviso]::after {
	content: attr(data-aviso); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	font-size: var(--sils-txt-3xs, 12px); letter-spacing: .03em; text-transform: uppercase; background: color-mix(in srgb, var(--sils-blanco) 85%, transparent); padding: var(--sils-esp-3xs, 4px) var(--sils-esp-2xs, 8px);
}
.sils-sel button.is-fantasma { cursor: default; }
.sils-sel button.sils-medida.is-fantasma { height: 36px; background: var(--sils-fantasma); border-color: var(--sils-fantasma); box-shadow: none; }
.sils-sel button.sils-op.is-fantasma .sils-op__caja { background: var(--sils-fantasma); border-color: var(--sils-fantasma); box-shadow: none; }

@keyframes sils-llamada { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.sils-paso--acabado.is-llamada .sils-opciones { animation: sils-llamada .5s ease; }
.sils-paso--acabado.is-llamada .sils-cap { color: var(--sils-texto); }

/* ── Resumen (columna derecha) ──────────────────────────────────────── */
/* La columna fija se hace en Elementor, sobre el WIDGET dentro de su columna: un sticky
   dentro del propio shortcode no funciona porque su contenedor mide lo mismo que él. */
.sils-res { position: static; }
.sils-res__obra { display: flex; gap: var(--sils-esp-xs, 12px); align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--sils-linea); }
.sils-res__obra img { width: 46px; height: 62px; object-fit: cover; display: block; background: var(--sils-fondo-img); }
.sils-res__obra .sils-cap { font-size: var(--sils-txt-4xs, 11px); margin-bottom: 3px; }
.sils-res__obra b { display: block; font-weight: 500; font-size: var(--sils-txt-2xs, 14px); }
.sils-res__obra small { display: block; color: var(--sils-gris); font-size: var(--sils-txt-3xs, 12px); margin-top: 2px; }
.sils-res__lista { display: grid; grid-template-columns: auto 1fr; gap: 7px var(--sils-esp-xs, 12px); margin: 0 0 var(--sils-esp-s, 16px); font-size: var(--sils-txt-3xs, 12px); }
.sils-res__lista dt { color: var(--sils-gris); text-transform: uppercase; font-size: var(--sils-txt-4xs, 11px); letter-spacing: var(--sils-ls-etiqueta, .15em); font-weight: 300; margin: 0; padding-top: 1px; }
.sils-res__lista dd { margin: 0; text-align: right; font-weight: 500; }
.sils-res__lista dd:empty::before { content: '—'; color: var(--sils-apagado); font-weight: 300; }
.sils-res__perso { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--sils-linea); }
.sils-res__perso-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin: 0; }
.sils-res__perso-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--sils-negro); }
.sils-res__perso-check .sils-cap { font-size: var(--sils-txt-4xs, 11px); }
.sils-res textarea.sils-res__perso-texto { width: 100%; min-height: 76px; margin: 6px 0 0; padding: 10px; font: inherit; font-size: var(--sils-txt-2xs, 14px); border: 1px solid var(--sils-borde); border-radius: var(--sils-radio); background: var(--sils-blanco); }
.sils-res__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sils-esp-xs, 12px); font-size: var(--sils-txt-m, 17px); font-weight: 500; }
.sils-res.is-lamina .sils-res__importe { font-size: var(--sils-txt-xs, 15px); }
/* Aviso de los portes, aparte y bajo el importe (el enlace y su ventana, en el tema:
   bricks-child/assets/portes.css). */
.sils-res__portes { margin-top: var(--sils-esp-3xs, 4px); text-align: right; line-height: 1; }
.sils-res__compra { display: flex; gap: var(--sils-esp-2xs, 8px); align-items: stretch; margin-top: 14px; }

.sils-cantidad { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--sils-borde); border-radius: var(--sils-radio); overflow: hidden; flex: 0 0 auto; }
:is(.sils-res, .sils-barra) button.sils-cantidad__btn { width: 24px; font-size: var(--sils-txt-s, 16px); display: grid; place-items: center; cursor: pointer; background: var(--sils-blanco); }
:is(.sils-res, .sils-barra) button.sils-cantidad__btn:hover { background: var(--sils-fantasma); }
.sils-res input.sils-cantidad__input {
	width: 32px; height: 100%; margin: 0; padding: 0; text-align: center; font: inherit; font-size: var(--sils-txt-2xs, 14px); font-weight: 500;
	border: 0; border-left: 1px solid var(--sils-borde); border-right: 1px solid var(--sils-borde); border-radius: 0; box-shadow: none; -moz-appearance: textfield;
}
.sils-res input.sils-cantidad__input::-webkit-outer-spin-button, .sils-res input.sils-cantidad__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

:is(.sils-res, .sils-barra) button.sils-anadir {
	flex: 1; min-height: 38px; padding: 0 14px; background: var(--sils-boton); color: var(--sils-boton-texto); border-radius: var(--sils-radio);
	text-transform: uppercase; font-size: var(--sils-txt-2xs, 14px); font-weight: 500; letter-spacing: .04em; white-space: nowrap; text-align: center; cursor: pointer;
}
:is(.sils-res, .sils-barra) button.sils-anadir:hover { background: var(--sils-negro-hover); color: var(--sils-boton-texto); }
:is(.sils-res, .sils-barra) button.sils-anadir[aria-disabled="true"] { background: var(--sils-inactivo); }

.sils-res__confianza { list-style: none; margin: 14px 0 0; padding: 0; font-size: var(--sils-txt-3xs, 12px); color: var(--sils-texto-suave); }
.sils-res__confianza li { padding: 3px 0 3px 20px; position: relative; margin: 0; }
/* Check en «Verde confianza» (--sils-verde-confianza), dibujado con máscara SVG. */
.sils-res__confianza li::before {
	content: ''; position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; background: var(--sils-verde);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Aviso de error al añadir (lo pone el JS). */
.sils-error {
	margin: 10px 0 0; padding: var(--sils-esp-2xs, 8px) 10px; border-radius: var(--sils-radio); font-size: var(--sils-txt-3xs, 12px); line-height: 1.35;
	background: var(--sils-reposo); color: var(--sils-texto); display: none;
}
.sils-error.is-visible { display: block; }

/* ── Precio suelto ──────────────────────────────────────────────────── */
.sils-precio { font-weight: 500; }

/* ── Composición (dentro de la columna central, estilo mínimo) ───────────── */
/* Tamaños en variables: móvil solo cambia números. La composición completa mide lo mismo
   que miniatura + título, para que los títulos de las obras queden alineados con su pie. */
.sils-compos {
	/* Un 40 % más grande que al principio (el usuario, 29-sep-2026: «más potente»). */
	--sils-mini-an: 116px; --sils-mini-al: 155px; --sils-titulo-al: 20px; --sils-completa-an: 224px;
	--sils-completa-al: calc(var(--sils-mini-al) + var(--sils-titulo-al));
	display: flex; flex-direction: column; margin: var(--sils-compos-margen, 0);
	border-top: 1px solid var(--sils-linea); padding-top: 20px;
}
.sils-compo { padding: 18px 0; border-top: 1px solid var(--sils-linea); }
.sils-compos > .sils-compo:first-child { border-top: 0; padding-top: 0; }
/* Titulillo: tipografía global «NUEVO Mini titulo» (583b582); el nombre, igual pero a 400. */
.sils-compo__cabecera {
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif;
	font-size: var(--sils-txt-3xs, 12px);
	font-weight: 300;
	text-transform: uppercase;
	line-height: 12px;
	letter-spacing: var(--sils-ls-etiqueta, .15em);
}
.sils-compo__cabecera { margin: 0 0 var(--sils-esp-s, 16px); color: var(--sils-gris); }
.sils-compo a.sils-compo__nombre { font-weight: 400; color: var(--sils-texto); text-decoration: none; margin-left: .25em; }
.sils-compo a.sils-compo__nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.sils-compo__n { margin-left: .25em; }

/* Fila: composición completa fija a la izquierda + carrusel de obras (nunca dos filas). */
.sils-compo__fila { display: flex; align-items: flex-start; gap: var(--sils-esp-xs, 12px); }
.sils-compo__completa { position: relative; flex: 0 0 var(--sils-completa-an); min-width: 0; }
.sils-compo__completa > a { display: block; }
.sils-compo__completa .sils-compo__mini { height: var(--sils-completa-al); }
.sils-compo__carril { position: relative; flex: 1 1 auto; min-width: 0; }
.sils-compo__obras {
	list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: var(--sils-esp-2xs, 8px); overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: 0 40px; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab;
}
/* Holgura tras la última obra, para que al final no quede cortada bajo el degradado/flecha. */
.sils-compo__obras::after { content: ''; flex: 0 0 32px; }
.sils-compo__obras::-webkit-scrollbar { display: none; }
.sils-compo__obras.is-arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.sils-compo__obras.is-arrastrando a { pointer-events: none; }
/* min-width: 0 — si no, un nombre largo (sin salto de línea) ensancha su miniatura. */
.sils-compo__obras li { position: relative; flex: 0 0 var(--sils-mini-an); min-width: 0; margin: 0; padding: 0; scroll-snap-align: start; }
.sils-compo__imagen { display: block; position: relative; color: var(--sils-gris); cursor: zoom-in; }
.sils-compo__imagen.es-actual { cursor: default; }
/* El tema pinta los enlaces de color: aquí mandan nuestros grises. */
.sils-compos a.sils-compo__titulo, .sils-compos a.sils-compo__titulo:visited { color: var(--sils-gris); text-decoration: none; }
.sils-compos a.sils-compo__titulo:hover { color: var(--sils-texto); text-decoration: underline; text-underline-offset: 3px; }
/* Lupa al pasar por encima. SIN velo sobre la obra: la que se mira se queda como está y
   son las demás las que se apagan (ver la regla de :has más abajo). */
.sils-compo__lupa {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--sils-texto); opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
/* Lupa de la web (Themify `ti-zoom-in`, línea fina) en un círculo blanco. */
.sils-compo__lupa i {
	display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
	font-size: var(--sils-txt-3xs, 12px); line-height: 1;
	background: color-mix(in srgb, var(--sils-blanco) 88%, transparent);
	box-shadow: 0 1px 6px color-mix(in srgb, var(--sils-negro) 14%, transparent);
}
.sils-compo__imagen:not(.es-actual):hover .sils-compo__lupa, .sils-compo__imagen:focus-visible .sils-compo__lupa { opacity: 1; }
/* En pantallas táctiles no hay lupa: se toca la foto (5-oct-2026, sin iconos fijos). */
@media (hover: none) {
	.sils-compo__lupa { display: none; }
}
.sils-compo__mini { display: block; height: var(--sils-mini-al); background: var(--sils-reposo); border-radius: 2px; overflow: hidden; border: 1px solid transparent; transition: border-color .2s ease; }
.sils-compo__mini img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s ease; -webkit-user-drag: none; }
/* Obra actual: sin enlace ni efectos, imagen algo apagada y título gris («desactivada»). */

.sils-compo__obras li.es-actual .sils-compo__mini img { opacity: .55; }
.sils-compo__obras li.es-actual .sils-compo__titulo { color: var(--sils-gris); }
.sils-compo__titulo {
	display: block; height: var(--sils-titulo-al); padding-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease, opacity .25s ease, padding .2s ease;
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif; font-size: var(--sils-txt-3xs, 12px);
	font-weight: 400; text-transform: uppercase;
	line-height: 11px; letter-spacing: 0.25px;
}
.sils-compo__obras li:not(.es-actual):hover .sils-compo__titulo { color: var(--sils-texto); }
/* Al pasar por una obra, las demás se apagan y ella destaca (sin crecer). */
@media (hover: hover) {
	.sils-compo__obras:has(li:not(.es-actual):hover) li:not(:hover) .sils-compo__mini img { opacity: .4; }
	.sils-compo__obras:has(li:not(.es-actual):hover) li:not(:hover) .sils-compo__titulo { opacity: .5; }
	/* Y la composición completa se apaga igual cuando se mira una obra, y al revés. */
	.sils-compo__fila:has(.sils-compo__obras li:not(.es-actual):hover) .sils-compo__completa .sils-compo__mini img { opacity: .4; }
	.sils-compo__fila:has(.sils-compo__completa:hover) .sils-compo__obras li .sils-compo__mini img { opacity: .4; }
	.sils-compo__fila:has(.sils-compo__completa:hover) .sils-compo__obras li .sils-compo__titulo { opacity: .5; }
}
/* Degradado en el lado que aún esconde obras (clases puestas por composiciones.js). */
.sils-compo__carril::before, .sils-compo__carril::after { content: ''; position: absolute; top: 0; height: var(--sils-mini-al); width: 44px; pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 1; }
.sils-compo__carril::before { left: 0; background: linear-gradient(to right, var(--sils-blanco) 20%, var(--sils-transparente)); }
.sils-compo__carril::after { right: 0; background: linear-gradient(to left, var(--sils-blanco) 20%, var(--sils-transparente)); }
.sils-compo__carril.hay-izq::before, .sils-compo__carril.hay-der::after { opacity: 1; }
/* Flechas: solo aparecen en el lado con obras escondidas. */
.sils-compos .sils-compo__nav {
	position: absolute; z-index: 2; top: calc(var(--sils-mini-al) / 2 - 15px); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
	background: var(--sils-blanco); border: 1px solid var(--sils-linea); border-radius: 50%; box-shadow: 0 2px 8px color-mix(in srgb, var(--sils-negro) 8%, transparent); color: var(--sils-texto); cursor: pointer;
	opacity: 0; pointer-events: none; transition: opacity .25s ease, border-color .2s ease;
}
.sils-compos .sils-compo__nav[hidden] { display: none; }
.sils-compos .sils-compo__nav:hover { border-color: var(--sils-borde-sel); background: var(--sils-blanco); }
.sils-compos .sils-compo__nav svg { width: 12px; height: 12px; }
.sils-compos .sils-compo__nav--prev { left: 4px; }
.sils-compos .sils-compo__nav--next { right: 4px; }
.sils-compo__carril.hay-izq .sils-compo__nav--prev, .sils-compo__carril.hay-der .sils-compo__nav--next { opacity: 1; pointer-events: auto; }

/* Móvil: la foto del conjunto a todo el ancho y, debajo, las obras en una fila que se
   desliza a sangre (sin flechas: se desliza con el dedo). */
@media (max-width: 767px) {
	.sils-compos { --sils-mini-an: 104px; --sils-mini-al: 139px; }
	.sils-compo__fila { flex-direction: column; align-items: stretch; gap: 14px; }
	.sils-compo__completa { flex: none; width: 100%; }
	.sils-compo__completa .sils-compo__mini { height: auto; aspect-ratio: 4 / 3; }
	.sils-compo__carril { margin-inline: calc(-1 * var(--sils-margen-seguridad, 16px)); }
	.sils-compo__obras { padding-inline-start: var(--sils-margen-seguridad, 16px); scroll-padding-inline: var(--sils-margen-seguridad, 16px); }
	/* Al final, el mismo margen (el padding final de un carril que se desliza no cuenta). */
	.sils-compo__obras::after { flex-basis: calc(var(--sils-margen-seguridad, 16px) - 8px); }
	.sils-compos .sils-compo__nav { display: none; }
}

/* Varias composiciones: una pestaña por composición (Shortcodes::compos_pestanas). Copia de
   las pestañas de la web (clase «pestanas-subrayado» de Bricks): texto normal, línea fina
   debajo de todas y la activa en negro con un subrayado de 2 px que crece. Siempre en una
   fila; si no caben, se deslizan de lado (la línea es una sombra interior porque el
   desplazamiento recortaría un borde). */
.sils-compos--pestanas > .sils-compo__cabecera { margin: 0 0 var(--sils-esp-s); }
.sils-compos__pestanas {
	display: flex; flex-direction: row; flex-wrap: nowrap; gap: 2.8rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
	box-shadow: inset 0 -1px 0 var(--sils-linea);
}
.sils-compos__pestanas::-webkit-scrollbar { display: none; }
.sils-compos .sils-compos__pestanas button.sils-compos__pestana,
.sils-compos .sils-compos__pestanas button.sils-compos__pestana:focus {
	position: relative; flex: none; margin: 0; padding: 0 0 var(--sils-esp-xs, 1.2rem); border: 0; border-radius: 0; background: none; box-shadow: none;
	font-family: var(--sils-fuente-thoren); font-size: var(--sils-txt-s); font-weight: 300; line-height: 1.2; letter-spacing: var(--sils-ls-texto, .12rem); text-transform: none;
	color: var(--sils-secundario); white-space: nowrap; cursor: pointer; transition: color 160ms ease;
}
.sils-compos .sils-compos__pestanas button.sils-compos__pestana::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sils-principal);
	transform: scaleX(0); transform-origin: left; transition: transform 240ms cubic-bezier(.2, .7, .2, 1);
}
.sils-compos .sils-compos__pestanas button.sils-compos__pestana:hover,
.sils-compos .sils-compos__pestanas button.sils-compos__pestana[aria-selected="true"] { color: var(--sils-principal); }
.sils-compos .sils-compos__pestanas button.sils-compos__pestana[aria-selected="true"]::after { transform: scaleX(1); }
.sils-compos .sils-compos__pestanas button.sils-compos__pestana:focus-visible { outline: 2px solid var(--sils-principal); outline-offset: -2px; }
/* El panel: la composición elegida, sin su cabecera (el nombre ya está en la pestaña). */
.sils-compos--pestanas > .sils-compo { border-top: 0; padding: var(--sils-esp-s) 0 0; }
.sils-compos--pestanas > .sils-compo.is-entrando { animation: sils-compo-entra 240ms ease both; }
@keyframes sils-compo-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sils-compo__pie-n { margin-left: .8em; font-size: var(--sils-txt-3xs, 12px); color: var(--sils-secundario); }
/* Móvil: la fila de pestañas y su línea llegan al borde, como el carrusel de obras. */
@media (max-width: 767px) {
	.sils-compos__pestanas {
		margin-inline: calc(-1 * var(--sils-margen-seguridad, 16px));
		padding-inline: var(--sils-margen-seguridad, 16px);
		scroll-padding-inline: var(--sils-margen-seguridad, 16px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.sils-compos--pestanas > .sils-compo.is-entrando { animation: none; }
	.sils-compos .sils-compos__pestanas button.sils-compos__pestana,
	.sils-compos .sils-compos__pestanas button.sils-compos__pestana::after { transition: none; }
}


@media (max-width: 767px) {
	/* Los tamaños de la composición en el móvil están arriba, con su bloque. */
	.sils-compos { --sils-ojo-al: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.sils-compo__mini, .sils-compo__mini img, .sils-compo__carril::before, .sils-compo__carril::after { transition: none; }
}

/* ── Ficha de composición (galería de pared) ──────────────────────────── */
.sils-cf { color: var(--sils-texto); }
/* Los 2 px de arriba igualan la distancia título → «Acabado» con la ficha de obra. */
.sils-cf__acabado { margin: 2px 0 18px; }
.sils-cf__acabado-dato { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
/* Misma caja que el selector de acabado de la ficha de obra, pero solo informativa. */
.sils-cf__acabado .sils-op__caja { width: 62px; height: 62px; }
.sils-compo-ficha .sils-cf__acabado .sils-op__caja img { width: 52px; height: 52px; object-fit: contain; border-radius: 0; }


/* Pestañas «Adquiere todo» / «Customizar». */
.sils-cf__pestanas { display: flex; gap: 0; border-bottom: 1px solid var(--sils-linea); margin-bottom: 20px; }
/* Tipografía de las migas de pan (628f468): un punto más gruesa que los titulillos. */
.sils-compo-ficha button.sils-cf__pestana {
	flex: 1 1 0; padding: 13px 10px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--sils-gris);
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif; font-size: var(--sils-txt-3xs, 12px);
	font-weight: 400; text-transform: uppercase;
	letter-spacing: 0.25px; transition: color .2s ease, border-color .2s ease;
}
.sils-compo-ficha button.sils-cf__pestana:hover { color: var(--sils-texto); }
.sils-compo-ficha button.sils-cf__pestana.es-activa { color: var(--sils-texto); border-bottom-color: var(--sils-texto); }

.sils-cf__incluye {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--sils-esp-xs, 12px); margin: 0 0 var(--sils-esp-s, 16px); padding: 10px var(--sils-esp-xs, 12px);
	background: var(--sils-reposo); border-radius: var(--sils-radio); color: var(--sils-texto);
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif; font-size: var(--sils-txt-3xs, 12px);
	font-weight: 400; letter-spacing: 0.25px;
}
.sils-cf__incluye .sils-cap { color: var(--sils-gris); }
.sils-compo-ficha button.sils-cf__reset { margin-left: auto; }

/* Modo «Adquiere todo»: una fila por obra. */
.sils-cf__lista { list-style: none; margin: 0; padding: 0; }
.sils-cf__fila { display: flex; align-items: center; gap: 14px; margin: 0; padding: var(--sils-esp-xs, 12px) 0; border-bottom: 1px solid var(--sils-linea); }
.sils-cf__fila .sils-cf__precio { margin-left: auto; text-align: right; }
.sils-cf a.sils-cf__obra { flex: 1 1 auto; display: flex; align-items: center; gap: var(--sils-esp-xs, 12px); min-width: 0; text-decoration: none; color: var(--sils-texto); }
.sils-cf .sils-compo__mini { flex: 0 0 52px; height: 68px; background: var(--sils-reposo); border-radius: 2px; overflow: hidden; border: 1px solid transparent; transition: border-color .2s ease; }
.sils-cf a:hover .sils-compo__mini { border-color: var(--sils-hover); }
/* La obra se ve entera: nunca recortada. */
.sils-cf .sils-compo__mini img, .sils-res__obras .sils-compo__mini img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* La imagen abre la ampliación. Sin velo encima: la obra que se mira se queda como está
   y las demás se apagan. A la obra se va por su título o desde la ampliación. */
.sils-compo-ficha button.sils-cf__imagen-caja { position: relative; display: block; flex: 0 0 auto; padding: 0; cursor: zoom-in; }
.sils-cf__lupa {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--sils-texto); opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.sils-cf__lupa i {
	display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
	font-size: var(--sils-txt-2xs, 14px); line-height: 1;
	background: color-mix(in srgb, var(--sils-blanco) 88%, transparent);
	box-shadow: 0 1px 6px color-mix(in srgb, var(--sils-negro) 14%, transparent);
}
.sils-compo-ficha button.sils-cf__imagen-caja:hover .sils-cf__lupa,
.sils-compo-ficha button.sils-cf__imagen-caja:focus-visible .sils-cf__lupa { opacity: 1; }
@media (hover: none) {
	.sils-cf__lupa { display: none; }
}
/* Aquí NO se apagan las demás obras al pasar por encima de una. Ese efecto se pensó para
   la ficha de obra, donde sirve para señalar cuál de la composición estás mirando; en
   esta pantalla, donde todas las obras son tuyas y las estás configurando, es ruido.
   En su lugar, un apunte mínimo: la obra señalada levanta un poco su título. */
@media (hover: hover) {
	.sils-cf__tarjeta:hover .sils-cf__titulo,
	.sils-cf__fila:hover .sils-cf__titulo { color: var(--sils-texto); }
}
.sils-cf__datos { display: flex; flex-direction: column; min-width: 0; }
.sils-cf a.sils-cf__titulo, .sils-cf__titulo {
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif; font-size: var(--sils-txt-3xs, 12px);
	font-weight: 400; text-transform: uppercase;
	letter-spacing: 0.25px; color: var(--sils-texto); text-decoration: none;
}
.sils-cf a.sils-cf__titulo:hover { text-decoration: underline; text-underline-offset: 3px; }
.sils-cf__specs { font-size: var(--sils-txt-3xs, 12px); color: var(--sils-gris); margin-top: 3px; }
.sils-cf__precio { font-size: var(--sils-txt-2xs, 14px); white-space: nowrap; }

/* Modo «Customizar»: una tarjeta por obra. */
.sils-cf__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.sils-cf__tarjeta { display: flex; flex-direction: column; gap: var(--sils-esp-2xs, 8px); padding-bottom: var(--sils-esp-xs, 12px); border-bottom: 1px solid var(--sils-linea); transition: opacity .2s ease; }
/* Obra fuera del conjunto: se apaga la obra y sus datos, pero NO el pie, porque ahí está
   el botón para volver a meterla (y el de restablecer). */
.sils-cf__tarjeta.es-fuera .sils-cf__imagen-caja,
.sils-cf__tarjeta.es-fuera .sils-cf__titulo,
.sils-cf__tarjeta.es-fuera .sils-cf__campos,
.sils-cf__tarjeta.es-fuera .sils-cf__suelta { opacity: .45; }
/* Fuera del conjunto: nada responde, ni el puntero invita a pulsar. Lo único vivo es el
   botón de volver a incluirla, que está en el pie. */
.sils-cf__tarjeta.es-fuera .sils-cf__imagen-caja,
.sils-cf__tarjeta.es-fuera .sils-cf__select,
.sils-cf__tarjeta.es-fuera .sils-cf__suelta { cursor: default; pointer-events: none; }
.sils-cf__tarjeta.es-fuera .sils-cf__lupa { display: none; }
.sils-cf__tarjeta.es-fuera .sils-cf__tarjeta-pie { opacity: 1; }
.sils-cf a.sils-cf__imagen { display: block; }
.sils-cf__tarjeta .sils-compo__mini { flex: none; width: 100%; height: 190px; padding: 14px; }

/* Escenario de la obra dentro de la tarjeta: la imagen va ENTERA (nada de recortes) y el
   marco que pinta el motor la abraza. El marco sobresale un poco de la imagen y se dibuja
   en perspectiva, así que la caja no puede recortar. */
.sils-cf .sils-compo__mini.es-con-marco {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	background: none;
	border: 0;
}
.sils-cf__marco { display: flex; max-width: 100%; }
.sils-cf__marco img.sils-marco__obra {
	display: block;
	width: auto;
	height: auto;
	/* Límites en píxeles, no en porcentaje: el envoltorio se encoge hasta la imagen
	   (tiene que abrazarla) y un porcentaje contra un padre que se encoge se queda en
	   nada. La caja útil de la tarjeta es de 162 px de alto. */
	max-width: 172px;
	max-height: 158px;
	object-fit: contain;
}
/* La lupa se pinta por encima del marco. */
.sils-compo-ficha button.sils-cf__imagen-caja.es-con-marco .sils-cf__lupa { z-index: 3; }
.sils-cf__campos { display: flex; flex-direction: column; gap: 7px; }
.sils-cf__campo { display: flex; flex-direction: column; gap: 3px; }
.sils-compo-ficha select.sils-cf__select {
	width: 100%; min-height: 34px; padding: 6px 26px 6px 9px; border: 1px solid var(--sils-borde); border-radius: var(--sils-radio);
	background: var(--sils-blanco); color: var(--sils-texto); font: inherit; font-size: var(--sils-txt-3xs, 12px); cursor: pointer; appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px; background-size: 5px 5px; background-repeat: no-repeat;
}
.sils-compo-ficha select.sils-cf__select:hover { border-color: var(--sils-hover); }
.sils-compo-ficha select.sils-cf__select:focus-visible { outline: 2px solid var(--sils-texto); outline-offset: 1px; }
.sils-cf__tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.sils-compo-ficha button.sils-cf__quitar {
	cursor: pointer; font-size: var(--sils-txt-3xs, 12px); color: var(--sils-gris); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease;
}
.sils-compo-ficha button.sils-cf__quitar:hover { color: var(--sils-texto); }
/* Comprar esta obra sola (solo en «Customizar»): botón de compra igual que «Añadir»,
   con la tipografía un punto menor y el precio dentro, a la derecha. */
.sils-compo-ficha button.sils-cf__suelta {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; min-height: 40px; margin-top: 10px; padding: 0 var(--sils-esp-xs, 12px);
	background: var(--sils-boton); color: var(--sils-boton-texto); border-radius: var(--sils-radio);
	text-transform: uppercase; font-size: var(--sils-txt-3xs, 12px); font-weight: 500; letter-spacing: .04em; cursor: pointer;
	transition: background-color .2s ease;
}
.sils-compo-ficha button.sils-cf__suelta:hover { background: var(--sils-negro-hover); color: var(--sils-boton-texto); }
.sils-compo-ficha button.sils-cf__suelta[aria-disabled="true"] { background: var(--sils-inactivo); cursor: default; }
/* El botón va en mayúsculas, pero el precio no: «Pt.» se escribe así, no «PT.». */
.sils-cf__suelta-precio { font-weight: 400; white-space: nowrap; text-transform: none; }
.sils-cf__tarjeta-pie { justify-content: flex-end; }

/* Resumen de compra de la composición (columna derecha, fija por Elementor). */
.sils-cf__resumen { display: block; }
/* Obras del conjunto dentro del resumen, con su selección. */
/* Con muchas obras (hasta 12), la lista no puede empujar el botón fuera de pantalla.
   Bajo su línea, los 14 px de los demás bloques del resumen: si no, «Personalización y
   diseño» (o el total) queda pegado a ella. */
.sils-res__obras {
	list-style: none; margin: 10px 0 14px; padding: 0 2px 10px 0; border-bottom: 1px solid var(--sils-linea);
	max-height: 232px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sils-hover) transparent;
}
.sils-res__obras::-webkit-scrollbar { width: 4px; }
.sils-res__obras::-webkit-scrollbar-thumb { background: var(--sils-hover); border-radius: 2px; }
.sils-res__obras li { display: flex; align-items: center; gap: 9px; margin: 0; padding: 3px 0; transition: opacity .2s ease; }
.sils-res__obras li.es-fuera { opacity: .4; }
.sils-res__obras .sils-compo__mini { flex: 0 0 28px; height: 36px; background: var(--sils-reposo); border-radius: 2px; overflow: hidden; display: block; }
.sils-res__obras-datos { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sils-res__obras-titulo {
	font-family: var(--sils-fuente-thoren, "Thoren Sans"), Sans-serif; font-size: var(--sils-txt-4xs, 11px);
	font-weight: 400; text-transform: uppercase;
	letter-spacing: 0.25px; color: var(--sils-texto);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sils-res__obras-specs { font-size: var(--sils-txt-4xs, 11px); line-height: 1.25; color: var(--sils-gris); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sils-res__obras-precio { font-size: var(--sils-txt-3xs, 12px); white-space: nowrap; }

.sils-cf__resumen-obras {
	list-style: none; margin: 14px 0 0; padding: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
	gap: var(--sils-esp-2xs, 8px); border-bottom: 1px solid var(--sils-linea);
}
.sils-cf__resumen-obras li { margin: 0; padding: 0; transition: opacity .2s ease; }
.sils-cf__resumen-obras li.es-fuera { opacity: .35; }
.sils-cf__resumen-obras .sils-compo__mini { flex: none; width: 100%; height: 62px; }
.sils-cf__resumen-precio { display: block; margin-top: 3px; font-size: var(--sils-txt-4xs, 11px); color: var(--sils-gris); text-align: center; }
.sils-cf__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sils-esp-xs, 12px); margin-top: var(--sils-esp-s, 16px); }
.sils-cf__resumen .sils-res__total { margin-top: 18px; }
.sils-cf__importe { font-size: var(--sils-txt-l, 20px); }
.sils-cf__piezas { margin: 2px 0 14px; font-size: var(--sils-txt-3xs, 12px); color: var(--sils-gris); }
.sils-compo-ficha button.sils-cf__anadir {
	width: 100%; min-height: 46px; padding: 0 18px; background: var(--sils-boton); color: var(--sils-boton-texto); border-radius: var(--sils-radio);
	text-transform: uppercase; font-size: var(--sils-txt-2xs, 14px); font-weight: 500; letter-spacing: .04em; cursor: pointer; transition: background-color .2s ease;
}
.sils-compo-ficha button.sils-cf__anadir:hover { background: var(--sils-negro-hover); color: var(--sils-boton-texto); }
.sils-compo-ficha button.sils-cf__anadir[aria-disabled="true"] { background: var(--sils-inactivo); cursor: default; }
/* Vive dentro de «Qué incluye», al final de la línea. */
.sils-compo-ficha button.sils-cf__reset { margin-left: auto; white-space: nowrap; }
.sils-cf__resumen .sils-res__confianza { margin-top: var(--sils-esp-s, 16px); }

/* Bloque completo (los dos juntos), por si se usa en una sola columna. */
.sils-cf__completo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }

@media (max-width: 767px) {
	.sils-cf__rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
	.sils-cf__tarjeta .sils-compo__mini { height: 150px; }
	.sils-cf__completo { grid-template-columns: 100%; gap: 20px; }
}

/* La composición dentro del carrito y la personalización plegada están en carrito.css:
   tienen que verse también en el carrito lateral, que se abre en cualquier página. */

/* ── Barra fija en móvil ────────────────────────────────────────────── */
.sils-barra { display: none; }
@media (max-width: 767px) {
	.sils-res { position: static; }
	/* Capa 400: por encima del contenido y por debajo de la cabecera (500). Todo lo que se
	   abre sobre la página la tapa: el menú (999), el buscador, el visor, las ventanas y el
	   carrito lateral. Con 999 empataba con el menú y, al ir después en el HTML, lo tapaba. */
	.sils-barra {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; gap: 10px; align-items: center; justify-content: space-between;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--sils-blanco); border-top: 1px solid var(--sils-linea); box-shadow: 0 -4px 12px color-mix(in srgb, var(--sils-negro) 6%, transparent);
	}
	.sils-barra { gap: var(--sils-esp-2xs, 8px); }
	.sils-barra__precio { min-width: 0; flex: 1 1 auto; }
	.sils-barra__importe { display: block; font-weight: 500; font-size: var(--sils-txt-s, 16px); }
	.sils-barra__seleccion { display: block; font-size: var(--sils-txt-4xs, 11px); color: var(--sils-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* Aviso de los portes: una línea propia al pie de la barra, bajo el precio (el enlace, en
	   bricks-child/assets/portes.css). Con menos relleno, la barra sigue cabiendo en los
	   72 px que se le reservan abajo. */
	.sils-barra:has(> .sils-barra__portes) { flex-wrap: wrap; row-gap: 2px; padding-top: var(--sils-esp-2xs, 8px); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
	.sils-barra > .sils-barra__portes { display: flex; flex: 0 0 100%; order: 10; }
	/* Que el precio no pase de línea: ocupa lo que dejan los botones, como sin el aviso. */
	.sils-barra:has(> .sils-barra__portes) .sils-barra__precio { flex: 1 1 0; }
	.sils-barra__portes .sils-portes.sils-portes[data-sils-portes] { font-size: var(--sils-txt-4xs, 11px); line-height: 1.2; }
	.sils-barra button.sils-anadir { flex: 0 0 auto; padding: 0 20px; min-height: 42px; }
	body.sils-con-barra { padding-bottom: 72px; }
	/* El botón flotante de ayuda (plugin cuadros-sils-contact-hub, #csHub) caía encima de
	   «Añadir»: con la barra, sube por encima de ella. */
	body.sils-con-barra #csHub { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Acciones que cuelgan otros plugins bajo el botón de añadir. Secundarias: más pequeñas y
   con borde gris, para que «Añadir» mande (el usuario, 29-sep-2026). */
.sils-res__acciones { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sils-esp-2xs, 8px); margin-top: 10px; }
.sils-res__accion {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px;
  padding: 7px var(--sils-esp-xs, 12px);
  border: 1px solid var(--sils-borde);
  border-radius: var(--sils-radio, 4px);
  color: var(--sils-texto);
  font-family: var(--sils-fuente-thoren, inherit);
  font-size: var(--sils-txt-3xs, 12px); font-weight: 500; line-height: 1.2;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.sils-res__accion:hover { background: var(--sils-reposo); border-color: var(--sils-hover); color: var(--sils-texto); }
.sils-res__accion svg { flex: 0 0 auto; width: 14px; height: 14px; }
/* La acción principal ocupa la fila. */
.sils-res__accion { flex: 1 1 auto; }
/* La que no aplica a esta obra: apagada, sin reacción; el motivo, al pasar por encima. */
.sils-res__accion.es-desactivada { opacity: .4; cursor: not-allowed; }
.sils-res__accion.es-desactivada:hover { background: none; border-color: var(--sils-borde); }
/* Acción en forma de enlace: sin caja, con el texto subrayado y el icono detrás, alineada a
   la derecha. Para la que no debe competir con «Añadir» pero tiene que reconocerse
   («Guardar en una lista», el usuario, 7-oct-2026). Se pide con la clase
   sils-res__accion--enlace. El icono va antes en el HTML: row-reverse lo pone detrás. */
.sils-res__accion.sils-res__accion--enlace {
  flex: 0 1 auto; flex-direction: row-reverse; justify-content: flex-start; gap: var(--sils-esp-2xs, 8px);
  margin-left: auto;
  padding: 0; border: 0; border-radius: 0; background: none;
}
.sils-res__accion--enlace .sils-res__accion-txt {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.sils-res__accion.sils-res__accion--enlace:hover { background: none; color: var(--sils-gris); }
.sils-res__accion.sils-res__accion--enlace.es-desactivada:hover { color: var(--sils-texto); }

/* ── Configurador compacto en el escritorio (7-oct-2026, la «C» de la prueba, elegida por
   el usuario) ─────────────────────────────────────────────────────────────────────────
   Todo a la vista pero apretado, para que marco y paspartú o soporte no queden abajo del
   todo: la orientación sube junto a «Medida» como dos botones unidos; la adaptación va en
   una línea con su ayuda y sin el aviso de vista aproximada; marcos y paspartús, más
   pequeños y sin nombre (sale al pasar por encima). El acabado se queda a su tamaño: más
   grande que el resto. En el móvil manda el configurador por pestañas
   (configurador-movil.css): nada de esto.
   Tres bloques separados por una línea fina (8-oct-2026): acabado · medida (con su
   orientación, la leyenda de «Formato recomendado» y la adaptación, que es parte de la
   medida y no lleva línea propia) · marco y paspartú o soporte; otra línea cierra el
   configurador. */
.sils-ico-ori { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: -1px; }
.sils-ico-ori svg { display: block; }
.sils-sel button.sils-ayuda--escritorio { display: none; }
@media (min-width: 768px) {
	.sils-sel > :is(.sils-paso, .sils-duo) { margin-top: 0; padding: 20px 0; border-top: 1px solid var(--sils-linea); }
	.sils-sel > .sils-duo { border-bottom: 1px solid var(--sils-linea); }
	.sils-sel .sils-opciones--acabado .sils-op__nombre { display: none; }

	.sils-sel button.sils-medida { min-width: 52px; padding: var(--sils-esp-2xs, 8px); font-size: var(--sils-txt-3xs, 12px); }
	.sils-sel .sils-paso--medida { position: relative; }
	/* La orientación sube a la derecha de «Medida» solo si el configurador tiene sitio (a 1024
	   la columna mide unos 210 px y tapaba el rótulo); si no, va debajo de las medidas. */
	.sils-sel { container: sils-sel / inline-size; }
	.sils-sel .sils-paso--medida .sils-orientacion { margin-top: var(--sils-esp-xs, 12px); }
	.sils-sel .sils-orientacion .sils-cabecera { display: none; }
	@container sils-sel (min-width: 400px) {
		.sils-sel .sils-paso--medida:has(.sils-orientacion) > .sils-cabecera { min-height: 30px; padding-right: 200px; }
		/* A la altura del rótulo: el bloque empieza 20 px por debajo de su línea. */
		.sils-sel .sils-paso--medida .sils-orientacion { position: absolute; top: 20px; right: 0; margin: 0; }
	}

	/* Rótulo, «?» (junto al rótulo, como en los demás pasos) y los botones. */
	.sils-sel .sils-paso--medida .sils-adaptacion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--sils-esp-s, 16px); }
	.sils-sel .sils-adaptacion .sils-cabecera { display: contents; }
	.sils-sel .sils-adaptacion .sils-valor { display: none; }
	/* Una sola adaptación posible (la obra no permite otras): sin botones, el valor dice cuál. */
	.sils-sel .sils-adaptacion--una .sils-valor { display: inline; }
	.sils-sel .sils-adaptacion .sils-opciones--adaptacion { order: 1; }
	.sils-sel .sils-adaptacion button.sils-ayuda--escritorio { display: inline-grid; }
	.sils-sel .sils-paso--medida p.sils-formato-aviso { display: none; }

	.sils-sel .sils-duo button.sils-op { min-width: 0; }
	.sils-sel .sils-duo .sils-op__caja { width: 40px; height: 40px; }
	.sils-sel .sils-duo .sils-op__caja img { width: 34px; height: 34px; }
	.sils-sel .sils-duo .sils-op__color { width: 26px; height: 26px; }
	.sils-sel .sils-duo .sils-op__nombre { display: none; }
}

/* Orientación y adaptación, en el ordenador y en el móvil: dos o tres botones unidos; el
   elegido, en negro (el usuario, 7-oct-2026: «la botonería tiene que ser igual»). En el
   móvil, más altos, como el resto de botones de la tira, para el dedo. */
.sils-sel :is(.sils-opciones--orientacion, .sils-opciones--adaptacion) { gap: 0; flex-wrap: nowrap; }
.sils-sel :is(.sils-opciones--orientacion, .sils-opciones--adaptacion) button.sils-medida {
	display: inline-flex; align-items: center; min-width: 0; padding: 6px 10px; margin-left: -1px;
	background: var(--sils-blanco); color: var(--sils-gris); border: 1px solid var(--sils-borde); border-radius: 0; box-shadow: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sils-sel :is(.sils-opciones--orientacion, .sils-opciones--adaptacion) button.sils-medida:first-child { margin-left: 0; border-radius: var(--sils-radio) 0 0 var(--sils-radio); }
.sils-sel :is(.sils-opciones--orientacion, .sils-opciones--adaptacion) button.sils-medida:last-child { border-radius: 0 var(--sils-radio) var(--sils-radio) 0; }
.sils-sel :is(.sils-opciones--orientacion, .sils-opciones--adaptacion) button.sils-medida:hover { background: var(--sils-reposo); color: var(--sils-texto); border-color: var(--sils-borde); }
.sils-sel :is(.sils-opciones--orientacion, .sils-opciones--adaptacion) button.sils-medida[aria-pressed="true"] {
	position: relative; z-index: 1; background: var(--sils-texto); color: var(--sils-blanco); border-color: var(--sils-texto); box-shadow: none;
}
@media (max-width: 767px) {
	.sils-sel :is(.sils-opciones--orientacion, .sils-opciones--adaptacion) button.sils-medida { padding: 10px 14px; }
}