/*
  Quicial — ficha de producto.
  Portado del bloque <style> del artboard "Quicial Producto". Los valores son
  los del diseno; lo unico que cambia es el nombre de la tarjeta de productos
  relacionados: el artboard reescribia .catcard (que en la home es la tarjeta
  de categoria, vertical 5:6 y con degradado) y aqui es otro componente. Se
  llama .reccard para que ambos convivan sin pisarse.
*/

html{interpolate-size:allow-keywords}

/* ---------- Migas ---------- */
.crumbsec{border-bottom:1px solid var(--hair)}
.crumbsec .secwrap{padding-top:16px;padding-bottom:16px}
.crumb{font-size:12.5px;color:rgba(82,63,52,.58);display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:rgba(82,63,52,.58)}
.crumb a:hover{color:#E23230}
.crumb .cur{color:#523F34;font-weight:500}

/* ---------- Cabecera de la ficha ---------- */
.pfsec{border-bottom:1px solid var(--hair)}
.pf{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* Una columna de graella es per defecte tan ampla com el min-content del seu
   contingut. Si el logo de la marca no arriba —passa de tant en tant, el
   servidor respon el repte antibot en lloc del fitxer— el navegador li dona
   l'ample de l'atribut width de la imatge trencada i la columna s'infla fins
   a 3000 px: la pagina sencera es desplaça en horitzontal, tambe a
   escriptori. Amb min-width:0 la columna mana sobre el contingut, i el
   maxim del logo l'acaba de tancar. */
.pf > *{min-width:0}
.pf-marca{display:inline-flex;align-items:center;max-width:100%;overflow:hidden}
.pf-marca img{width:auto;max-width:100%}
.pf-t{margin:18px 0 0}
.pf-nota{display:flex;align-items:center;gap:10px;margin-top:16px}
.pf-nota-n{font-size:13px;color:rgba(82,63,52,.58)}
/* Sense maxim: el reclam ocupa el mateix ample que el titular, que es la
   columna sencera. A 460px trencava molt abans i es veia desalineat. */
.pf-sub{margin-top:22px}
.pf-acciones{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.pf-acciones > *{flex:1;min-width:180px}
/* El germa blanc del boto vermell: mateixa alcada i mateix cos, per anar
   a la mateixa fila. L'ompliment de l'hover aprofita el mecanisme de .btn
   —una franja que creix de zero a tot l'ample— pero en beix en lloc de
   marro fosc, que al costat del vermell cridava massa. */
.btn-folleto{background-color:#fff;background-image:linear-gradient(var(--beige-35),var(--beige-35));
  border:1px solid var(--hair);color:#523F34;padding:16px 30px;font-size:13px}
.btn-folleto:hover{color:#523F34;border-color:rgba(82,63,52,.28)}

/* ---------- Galeria de la ficha ---------- */
/* Marcos de foto de producto en 3:2, la proporcion de los artboards. La
   imagen entra completa —se ajusta al ancho o al alto— y lo que sobra queda en
   blanco: asi no se recorta maquinaria ni se deforma, que es el riesgo con
   fotos de catalogo de proporciones dispares. */
.pgal-hero{position:relative;aspect-ratio:3/2;background:#fff;border:1px solid rgba(82,63,52,.1)}
.pgal-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.pgal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumb{position:relative;aspect-ratio:3/2;background:#fff;border:1px solid rgba(82,63,52,.1);cursor:pointer;transition:opacity .18s ease;padding:0}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.thumb:hover{opacity:.82}
.thumb.is-activa{border-color:#E23230}
.zoombtn{position:absolute;top:14px;right:14px;z-index:4;width:44px;height:44px;border:1px solid rgba(82,63,52,.16);border-radius:50%;background:rgba(255,255,255,.9);color:#523F34;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease}
.zoombtn:hover{background:#E23230;border-color:#E23230;color:#fff}
.zoombtn svg{width:20px;height:20px}

/* ---------- Visor a pantalla completa ---------- */
.lightbox{position:fixed;inset:0;background:rgba(15,13,11,.94);display:none;align-items:center;justify-content:center;z-index:200;padding:40px}
.lightbox.on{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;object-fit:contain}
.lbclose{position:absolute;top:24px;right:28px;background:none;border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;font-weight:300}
.lbclose:hover{color:#E23230}
.lbnav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.lbnav:hover{background:#E23230;border-color:#E23230}
.lbnav svg{width:24px;height:24px}
.lbprev{left:28px}
.lbnext{right:28px}

/* ---------- Acordeon de modelos ---------- */
.modacc{margin-top:34px;padding-top:16px;border-top:1px solid var(--hair)}
.modsum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.modsum::-webkit-details-marker{display:none}
.modsum .qgroup{margin-bottom:0;color:#523F34}
.modacc::details-content{block-size:0;overflow:hidden;transition:block-size .38s cubic-bezier(.4,0,.2,1),content-visibility .38s allow-discrete}
.modacc[open]::details-content{block-size:auto}
.modinner{overflow:hidden;padding-top:2px}
/* Dentro del acordeon el resumen ya cierra con su propio filete: la lista no
   debe anadir el suyo o quedan dos lineas pegadas. Fuera del acordeon —el
   bloque suelto de «Modelos disponibles»— si lo lleva. */
.modinner .pmlista{border-top:none}
.modtoggle{flex:none;display:flex;align-items:center;justify-content:center;color:#523F34;transition:color .2s ease}
.modsum:hover .modtoggle{color:#E23230}
.modtoggle svg{width:18px;height:18px}
.modacc .ic-minus{display:none}
.modacc[open] .ic-minus{display:block}
.modacc[open] .ic-plus{display:none}

/* ---------- Filas etiqueta / valor ---------- */
.pmlista{border-top:1px solid var(--hair)}
.pmrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--hair)}
.pmrow:last-child{border-bottom:none}
.pmname{font-weight:600;font-size:15px;color:#523F34}
.pmref{color:rgba(82,63,52,.58);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;text-align:right}
.pmref--texto{text-transform:none}

/* ---------- Pestanas ---------- */
/* El aire de abajo va por panel y no por la seccion. Puesto en la seccion se
   sumaba al que ya trae cada panel, y el de informacion adicional —que ya lleva
   los suyos 64 arriba y abajo— acababa con el doble por abajo que por arriba.

   El de descripcion si lo necesita: sus bloques solo espacian por arriba, asi
   que el ultimo —la galeria— acababa a ras del fondo oscuro del CTA. */
#panel-desc{padding-bottom:var(--sec-y)}
/* Menys quan el darrer bloc ja resol el seu propi aire. El video va a sang i
   en negre: un coixi blanc entre ell i el fons fosc del CTA no sembla aire,
   sembla un forat. I les targetes de ventatges ja porten els seus 80px.
   I la descripcio sola tampoc: el seu .secwrap ja porta el var(--sec-y) per
   les dues bandes, aixi que el coixi del panell li feia el doble per baix que
   per dalt —96 a dalt, 192 a baix. */
#panel-desc:has(> .pvideo:last-child),
#panel-desc:has(> .benwrap:last-child),
#panel-desc:has(> .pdesc-full:last-child){padding-bottom:0}
.tabwrap{max-width:var(--sec-max);margin:0 auto;padding:0 var(--sec-x)}
.tabsnav{display:flex;flex-wrap:wrap;position:relative}
.tabsnav::after{content:"";position:absolute;bottom:0;left:calc((100% - var(--vw, 100vw)) / 2);width:var(--vw, 100vw);height:1px;background:var(--hair)}
.tabsnav button{font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:15px 30px;background:none;border:none;color:rgba(82,63,52,.58);cursor:pointer;transition:color .2s ease}
.tabsnav button:hover{color:#523F34}
.tabsnav button.tab-on{color:#523F34}
.tabsnav button:first-child{padding-left:0}
.tabsnav button + button{border-left:1px solid var(--hair)}
.tabsnav button:last-child{border-right:1px solid var(--hair)}
.tabpanel{display:none}
.tabpanel.panel-on{display:block}

/* Separador a sangre entre bloques dentro de una pestana. */
.secdiv{position:relative;margin-top:56px;padding-top:56px}
.secdiv::before{content:"";position:absolute;top:0;left:calc((100% - var(--vw, 100vw)) / 2);width:var(--vw, 100vw);height:1px;background:var(--hair)}
.sechead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ---------- Descripcion ---------- */
.pdesc{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.pdesc .h2{max-width:none}
.pdesc p{font-size:16px;line-height:1.75;color:#5c493f;margin:0;max-width:none}
.pdesc p + p{margin-top:20px}
/* El que obre un bloc dins de la descripcio. Un filet molt discret al damunt:
   el text ve de fitxes llargues on cada apartat tenia el seu titol, i sense cap
   marca es llegeixen tots seguits com si fossin el mateix. Al primer no, que
   alli no separa res. */
.pdesc p.pdesc-lead{margin-top:34px;padding-top:34px;border-top:1px solid var(--hair)}
.pdesc p.pdesc-lead:first-child{margin-top:0;padding-top:0;border-top:0}
.pdesc-full{margin-left:calc(-1 * var(--sec-x));margin-right:calc(-1 * var(--sec-x))}

/* ---------- Ventajas numeradas ---------- */
/* Un 25% menys d'aire entre el text i les targetes: 56 -> 42. */
.benwrap{margin-top:42px;padding-bottom:80px}
/* Les ventatges van totes a la mateixa fila. El nombre el posa la fitxa: son
   quatre, cinc o sis segons el producte, i amb cinc fixes la sisena queia sola
   a una segona fila. El topall de vuit es per no estrenyer-les tant que el
   titol no hi capigui. */
.benrow{display:grid;grid-template-columns:repeat(var(--ben-cols,5),minmax(0,1fr));gap:16px}
.bencard{border:1px solid var(--hair);background:var(--beige-08);padding:26px 24px;display:flex;flex-direction:column;gap:40px;justify-content:space-between;transition:border-color .2s ease}
.bencard:hover{border-color:#523F34}
.bennum{font-weight:700;font-size:14px;color:#E23230;margin-bottom:14px}
/* Amb moltes columnes la targeta s'estreny i el titol se'n sortia: a cinc fa
   uns 270px i els 21px del sistema hi caben, a set en fa 190 i «Materiales
   Apropiados para Alimentacion» sortia per la dreta. La mida baixa a mesura que
   hi ha mes columnes, mai per sobre dels 21 del sistema i mai per sota de 15.
   Sense guionets: «hyphens:auto» partia «Cuchillo» en «Cuchi-llo» i «pulido»
   en «pu-lido», que es pitjor que la vora que evitava. Nomes es parteix una
   paraula que tota sola no hi cabria. */
.benrow .bentitle{font-size:clamp(15px,calc(21px - (var(--ben-cols,5) - 5) * 1.2px),21px);overflow-wrap:break-word}
.benrow .bendesc{overflow-wrap:break-word}
.benrow .bencard{padding-left:clamp(14px,calc(24px - (var(--ben-cols,5) - 5) * 2px),24px);padding-right:clamp(14px,calc(24px - (var(--ben-cols,5) - 5) * 2px),24px)}
/* I l'aire entre el titol i la descripcio, que a quaranta fixos deixava mig
   targeta buida quan el text es curt. */
.benrow .bencard{gap:clamp(20px,calc(40px - (var(--ben-cols,5) - 5) * 4px),40px)}

/* ---------- Video ---------- */
/* A sangre de lado a lado de la pantalla, como en el artboard. Se usa --vw
   (el ancho real del documento, sin la barra de scroll) en vez de 100vw. */
.pvideo{margin-left:calc((100% - var(--vw, 100vw)) / 2);width:var(--vw, 100vw);height:70vh;background:#000;position:relative;overflow:hidden}
/* El iframe se dimensiona a 16:9 sobre el ancho, para que el video llene la
   banda de lado a lado. Si el 16:9 resulta mas alto que la banda se recorta,
   que es lo buscado: con el iframe al 100% de alto era YouTube el que metia
   franjas negras a los lados.
   El recorte va por arriba, no repartido: la barra de controles de YouTube
   vive en el borde de abajo del iframe, y centrandolo se quedaba fuera de la
   banda. Mientras el video arrancaba solo daba igual; ahora hay que poder
   darle al play, moverse por el video y pararlo. */
.pvideo iframe{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;min-width:100%;height:calc(var(--vw, 100vw) * 0.5625);min-height:100%;border:0;display:block}

/* ---------- Modelos + compatibilidades ---------- */
/* Una sola columna, tots dos blocs un sota l'altre i separats per un filet
   horitzontal, com el formulari. Abans era una graella de dues amb una linia
   vertical al 50%: quan la fitxa nomes portava un dels dos blocs —la majoria,
   perque «compatibilidades» sol venir buit— la meitat dreta quedava en blanc i
   semblava que hi faltes una seccio.

   De passada, el desktop i el mobil ara fan el mateix: el mobil ja plegava a
   una columna amb filet, i eren dues maneres de pintar el mateix bloc.

   El filet superior de .secdiv segueix sent l'unic que separa aquest bloc del
   que ve just abans; el coixi de dalt el posen els blocs, no el contenidor. */
.pmodcomp{position:relative;margin-top:0;padding-top:0}
.pmodcomp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.pmodcomp-a,.pmodcomp-b{padding:48px 0 0}
/* El filet va entre els dos blocs, i nomes hi es quan tots dos hi son: amb un
   de sol no hi ha res a separar. */
.pmodcomp-a + .pmodcomp-b{margin-top:48px;border-top:1px solid var(--hair)}
.pmodcomp .sechead{margin-bottom:22px}
/* La mateixa mesura que .xlink, que es el bloc del costat: a tota l'amplada la
   referencia se n'anava a l'altra punta i quedava massa buit al mig. */
.pmodcomp-a .pmlista{max-width:760px}
.xlink{font-size:15px;line-height:1.7;color:#5c493f;margin:0;max-width:760px}
.xlink a{font-weight:600}

/* ---------- Galeria de detalles ---------- */
/* Carrusel del artboard «Galeria - Detalles del producto»: una cinta de
   diapositivas que se desplaza en horizontal, con dos fotos por diapositiva.
   Medidas y transicion tomadas del artboard tal cual. */
.pdetsec .sechead{margin-bottom:48px}
/* El artboard de la galeria pinta su titular a 44px, no a los 34px del DS.
   Se acota a esta seccion para no tocar el resto de los h2 del sitio. */
.pdetsec .h2{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.025em}
.pdet{overflow:hidden}
.pdet-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.pdet-slide{flex:0 0 100%;display:grid;grid-template-columns:1fr 1fr;gap:40px}
/* La caja fija la proporcion (16/11 del artboard) y la foto la llena hasta el
   borde, sin aire: es lo que hace el artboard. `contain` y no `cover` porque
   las fotos del cliente vienen con proporciones dispares, algunas verticales, y
   rellenar obligaria a recortarlas —a una maquina vertical se le come media
   pieza. Sin padding: la foto toca el marco. */
.pdet-fig{position:relative;margin:0;border:1px solid var(--hair);background:#fff;aspect-ratio:16/11;overflow:hidden}
.pdet-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pdet-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px}
.pdet-puntos{display:flex;align-items:center;gap:10px}
.pdet-punto{width:38px;height:4px;background:var(--hair);border:0;padding:0;cursor:pointer;transition:background .25s ease}
.pdet-punto:hover{background:rgba(82,63,52,.3)}
.pdet-punto[aria-current="true"]{background:#E23230}
/* Las dos flechas comparten filete: el margen negativo solapa los bordes. */
.pdet-nav{display:flex}
.pdet-arrow{width:64px;height:64px;display:grid;place-items:center;background:#fff;border:1px solid var(--hair);margin-left:-1px;cursor:pointer;color:#523F34;transition:background .25s ease,color .25s ease,border-color .25s ease}
.pdet-arrow svg{width:22px;height:22px;stroke-width:1.5}
.pdet-arrow:hover{background:#211D1A;border-color:#211D1A;color:#fff;position:relative;z-index:1}
.pdet-arrow:disabled{opacity:.35;cursor:default}
.pdet-arrow:disabled:hover{background:#fff;border-color:var(--hair);color:#523F34}

/* ---------- Especificaciones ---------- */
.pspec{padding:64px 0}
.pspec .sechead{margin-bottom:32px}
.pspec .pmlista{max-width:720px}
/* Nomes a les especificacions, 35 i 65. Amb «1fr auto» la columna de la dreta
   s'enduia el que necessitava i escanyava l'etiqueta: a «Alimentacion electrica
   (Tension y Frecuencia)» el nom es partia en dues linies mentre el valor
   ocupava dos tercos de la fila. Als models no: alli el valor es una referencia
   curta i la columna fixa la deixa arrambada a la dreta, com toca. */
.pspec .pmrow{grid-template-columns:minmax(0,35fr) minmax(0,65fr)}

/* ---------- Valoraciones ---------- */
.pval{padding:64px 0}
.pval .sechead{margin-bottom:32px}
.pval-grid{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.pval-nota{font-weight:900;font-size:56px;color:#523F34;line-height:1}
.pval-base{font-size:13px;color:rgba(82,63,52,.58)}
.stars{color:#E23230;letter-spacing:2px;font-size:15px}
.stars--grande{font-size:18px;margin:8px 0 6px}
.pval-lista{max-width:680px}
.review{display:flex;gap:20px;padding:28px 0;border-top:1px solid var(--hair)}
.review:first-child{border-top:none;padding-top:0}
.ravatar{width:46px;height:46px;border-radius:50%;background:var(--beige-35);color:rgba(82,63,52,.45);flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;text-transform:uppercase}
.review-autor{font-weight:700;font-size:15px;color:#523F34;margin:8px 0 3px}
.review-fecha{font-weight:400;font-size:13px;color:rgba(82,63,52,.58)}
.review-texto{font-size:15px;line-height:1.6;color:#5c493f;margin:6px 0 0}
.review-texto p{margin:0}
.review-texto p + p{margin-top:10px}

/* Formulario de valoracion */
/* Els camps son els .fld del design system, no un estil propi: abans aquest
   formulari duia una caixa de 1px mentre el de contacte anava amb filet a sota,
   i eren dos camps diferents per a la mateixa cosa. */
.pform textarea.fld{min-height:132px;resize:vertical}
.pform-label{font-size:13px;font-weight:600;color:#5c493f;margin-bottom:8px}
.pform-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:rgba(82,63,52,.62);line-height:1.5}
.pform-consent input{margin-top:3px}

/* Selector de estrellas: radios reales, accesible con teclado. */
.starpick{display:inline-flex;flex-direction:row-reverse;gap:4px}
.starpick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.starpick label{font-size:24px;line-height:1;color:#d9c9bf;cursor:pointer;transition:color .15s ease}
.starpick label:hover,.starpick label:hover ~ label,
.starpick input:checked ~ label{color:#E23230}
.starpick input:focus-visible + label{outline:2px solid #E23230;outline-offset:2px}

/* ---------- Boton de relleno ---------- */
.qbtnfill{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;width:100%;background:#E23230;color:#fff;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:16px 30px;cursor:pointer;border:none;font-family:inherit;transition:color .3s ease}
.qbtnfill::before{content:"";position:absolute;inset:0;background:#211D1A;transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.6,.2,.2,1);z-index:0}
.qbtnfill:hover{color:#fff}
.qbtnfill:hover::before{transform:scaleX(1)}
.qbtnfill > span{position:relative;z-index:1}
.qbtnfill--auto{width:auto}
.qbtn-lite{background:#fff;color:#211D1A}
.qbtn-lite::before{background:#E23230}
.qbtn-lite:hover{color:#fff}

/* ---------- CTA de la ficha ---------- */
/* Mismo patron que el cierre de la home: la seccion lleva el fondo y el bloque
   se envuelve dentro, delimitado por un filete claro de 1 px. */
/* Fondo de seccion en Fosc, el mismo del pie. El bloque interior va
   transparente y solo lo delimita el filete, con el mismo claro que usa el
   pie (rgba(255,255,255,.1) de .foot-rule y .foot-col). */
.pcta{background:#211D1A}
.pcta-wrap{max-width:var(--sec-max);margin:0 auto;padding:var(--sec-y) var(--sec-x)}
/* El artboard lo traia a 35fr/65fr; se cambia a mitades por indicacion del
   cliente, para que la foto tenga el mismo peso que el texto. */
.pcta-block{background:transparent;border:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:1fr 1fr}
.pcta-block--sin-imagen{grid-template-columns:minmax(0,1fr)}
/* La foto es la del propi producte, retallada arran de la maquina i sobre
   blanc: omplint la caixa se'n perdien els extrems. S'hi encaixa sencera, amb
   el fons blanc de la propia foto fent de marge. */
.pcta-img{position:relative;background:#fff;border-right:1px solid rgba(255,255,255,.1);min-height:360px;padding:24px}
.pcta-img img{position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);object-fit:contain}
.pcta-body{padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.pcta-t{font-weight:500;font-size:var(--fs-h2);line-height:1.14;letter-spacing:-.02em;color:#fff;margin:0;max-width:560px;text-wrap:pretty}
.pcta-p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.72);margin:16px 0 0;max-width:480px}
.pcta-acciones{display:flex;gap:14px;flex-wrap:wrap}
.pcta-acciones .qbtnfill{width:auto;padding:12px 24px;font-size:12px}

/* ---------- Productos relacionados ---------- */
.recgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.reccard{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff;text-decoration:none;border:1px solid rgba(82,63,52,.16);transition:box-shadow .22s ease}
.reccard:hover{box-shadow:0 26px 46px -30px rgba(33,29,26,.45)}
/* Les fotos de producte venen retallades arran de la maquina, sense aire. Amb
   el marge blanc de la targeta respiren i totes queden a la mateixa caixa. */
.recimg{position:relative;aspect-ratio:3/2;overflow:hidden;background:#fff;padding:18px}
.recimg img{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:contain;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.reccard:hover .recimg img{transform:scale(1.06)}
/* L'enllac de la targeta va a baix, amb la veu petita dels avantitols. El boto
   de fletxa que hi havia a dalt a la dreta reclamava mes atencio que el propi
   producte i trencava la caixa de la foto. */
/* La barra s'estira fins al fons de la targeta i l'enllac s'hi enganxa: els
   noms fan una o dues linies i, sense aixo, l'enllac quedava a una alçada
   diferent a cada targeta de la fila. */
.recbar{flex:1;display:flex;flex-direction:column;gap:20px;padding:18px 20px;border-top:1px solid rgba(82,63,52,.16)}
/* Un escalo per sota de l'avantitol del sistema. A 12px amb .18em d'espaiat
   l'enllac pesava gairebe tant com el nom del producte: en majuscules, negreta
   i tan espaiat, dotze pixels es llegeixen com quinze.

   El margin auto l'enganxa al fons; el gap de la barra nomes fa de separacio
   minima quan el nom ocupa dues linies i ja no sobra espai. */
.recbar-cta{align-self:flex-start;margin-top:auto;font-size:11px;letter-spacing:.14em;padding:8px 14px;border:1px solid #E23230;color:#E23230;background-color:transparent;background-image:linear-gradient(#E23230,#E23230)}
/* El barrido lo hereda de .btn; aqui solo se dispara des de la targeta, que es
   qui rep el cursor, i no des del propi boto. */
.reccard:hover .recbar-cta{background-size:100% 100%;color:#fff}
.recbar-t{min-width:0;font-weight:500;font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.01em;color:#523F34;margin:0}

/* ---------- Aparicion al hacer scroll ---------- */
.quicial-anim .fade-up{opacity:0}
.quicial-anim .fade-up.in{animation:fadeUp .85s cubic-bezier(.2,.7,.2,1) forwards}

@media (prefers-reduced-motion: reduce) {
  .fade-up{opacity:1;animation:none}
}

/* ---------- Responsive (pendiente de artboards de movil) ---------- */
@media (max-width: 1100px) {
  .pf{grid-template-columns:minmax(0,1fr);gap:40px}
  .benrow{grid-template-columns:repeat(3,1fr)}
  .pmodcomp-a,.pmodcomp-b{padding:40px 0 0}
  .pmodcomp-a + .pmodcomp-b{margin-top:40px}
  .pval-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .pcta-block{grid-template-columns:minmax(0,1fr)}
  .pcta-img{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);min-height:52vw}
  .recgrid{grid-template-columns:repeat(2,1fr)}
  .pvideo{height:52vh}
}

@media (max-width: 900px) {
  .pdesc{grid-template-columns:minmax(0,1fr);gap:32px}
  /* Punto de ruptura de la galeria segun el artboard. */
  .pdetsec .sechead{margin-bottom:32px}
  .pdet-slide{grid-template-columns:minmax(0,1fr);gap:20px}
  .pdet-arrow{width:52px;height:52px}
}

@media (max-width: 720px) {
  .benrow{grid-template-columns:minmax(0,1fr)}
  .recgrid{grid-template-columns:minmax(0,1fr)}
  .pf-acciones > *{flex:1 1 100%}
  .tabsnav button{padding:13px 16px;font-size:12px}
  .tabsnav button:first-child{padding-left:0}
  .pcta-body{padding:28px}
  .pvideo{height:40vh}
}

/* El formulario de comentarios de WordPress, con el marcado del diseno. */
.pval-form .pform{margin-top:0}
.pform p{margin:0}
.pform .comment-form-author,.pform .comment-form-email{min-width:0}
.pform{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:680px}
.pform .comment-form-comment,.pform .pform-campo,.pform .comment-form-cookies-consent,.pform .pform-enviar,.pform .form-submit{grid-column:1 / -1}
.pform-enviar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

@media (max-width: 900px) {
  .pdesc{grid-template-columns:minmax(0,1fr);gap:32px}
}

@media (max-width: 720px) {
}
.sechead--rel{margin-bottom:44px}
.lightbox[hidden]{display:none!important}