/* ============================================================
   Página CERTIFICACIÓN (certificacion-build.php). Prototipo: certification.css.

   El diseño vive en las clases V4 art-cert-* (certificacion-classes.php); la
   cabecera usa las de Sectores (art-sec-pag*: su velo y su raya están en
   pagina-sectores.css). Aquí solo lo que V4 no expresa: los iconos de las
   fichas, el subrayado y el hover de las placas del mosaico y el white-space.

   El tema carga este archivo en TODAS las páginas: cada regla va enganchada a
   una clase art-cert-* o a un atributo data-art-cert-*.
   ============================================================ */

/* la norma: el número grande no parte */
.elementor .art-cert-parte__num { white-space: nowrap; }

/* fichas: el icono (Phosphor FileText y Files, los del prototipo) dibujado con
   máscara en el color de su caja (Indigo). La caja es un contenedor atómico:
   su ::before es la capa de fondo de Elementor (.e-con:before) y aquí se
   redefine entera */
.elementor [data-art-cert-ico]::before {
	content: ""; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
	background: currentColor; border: 0; opacity: 1; mix-blend-mode: normal;
	-webkit-mask: var(--art-cert-ico) center / contain no-repeat;
	mask: var(--art-cert-ico) center / contain no-repeat;
}
.elementor [data-art-cert-ico="reporte"] { --art-cert-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z'/%3E%3C/svg%3E"); }
.elementor [data-art-cert-ico="ficha"] { --art-cert-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,66.34l-40-40A8,8,0,0,0,168,24H88A16,16,0,0,0,72,40V56H56A16,16,0,0,0,40,72V216a16,16,0,0,0,16,16H168a16,16,0,0,0,16-16V200h16a16,16,0,0,0,16-16V72A8,8,0,0,0,213.66,66.34ZM168,216H56V72h76.69L168,107.31v84.53c0,.06,0,.11,0,.16s0,.1,0,.16V216Zm32-32H184V104a8,8,0,0,0-2.34-5.66l-40-40A8,8,0,0,0,136,56H88V40h76.69L200,75.31Zm-56-32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,152Zm0,32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,184Z'/%3E%3C/svg%3E"); }
/* en el editor, la caja vacía del icono no se pinta como zona de soltar de 120 px */
.e-atomic-element[data-art-cert-ico]:has(> .elementor-empty-view) { min-height: 0 !important; }
.e-atomic-element[data-art-cert-ico] > .elementor-empty-view { display: none !important; }

/* mosaico «Por material»: la acción subrayada (degradado de 1,5 px, como
   .diseno__ir), la foto que se acerca y, desde 900 px, la placa que se oscurece */
.elementor .art-cert-placa__ir { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; }
.elementor .art-cert-placa .art-img-cubre { transition: transform 1.2s var(--art-curva); }
.elementor .art-cert-placa:is(:hover, :focus-visible) .art-img-cubre { transform: scale(1.04); }
.elementor .art-cert-placa:focus-visible [data-art-flecha]::after { transform: translateX(4px); }
@media (min-width: 900px) {
	.elementor .art-cert-placa__pie { transition: background-color .3s var(--art-curva); }
	.elementor .art-cert-placa:is(:hover, :focus-visible) .art-cert-placa__pie { background-color: var(--negro, #000); }
}

/* «Cómo pedirlos»: el botón parte en dos renglones si no cabe (style.css pone
   white-space: nowrap a todo .art-btn; el prototipo, normal en este botón) */
.elementor .art-cert-pedir__btn { white-space: normal; }

@media (prefers-reduced-motion: reduce) {
	.elementor .art-cert-placa .art-img-cubre, .elementor .art-cert-placa__pie { transition: none; }
	.elementor .art-cert-placa:is(:hover, :focus-visible) .art-img-cubre,
	.elementor .art-cert-placa:is(:hover, :focus-visible) [data-art-flecha]::after { transform: none; }
}