/* ===== Ajustes de plantilla v1.1 (Tienda Padelpoint) =================
   Van DESPUES del motor del 215 para poder corregirlo sin tocarlo.
   1) El hover no mueve nada: cambia el color, nunca la geometria.
   2) Los iconos de las cuadriculas, mas grises.
   ==================================================================== */

/* --- 1. hover sin movimiento --- */
.joma-post .jp-grid .jp-card,
.joma-post .jp-grid .jp-card:hover{
  border-width:1.5px!important;
  transform:none!important;
  margin:0!important;
}
.joma-post .jp-grid .jp-card:hover{
  border-color:#009ecf!important;
  box-shadow:0 6px 20px rgba(0,158,207,.14)!important;
}
/* las miniaturas de la galeria de producto tenian 2px y 1.75px al activarse:
   esa decima de pixel es la que hacia bailar la fila */
.joma-post .jp-grid .jp-card .jp-mgal-t,
.joma-post .jp-grid .jp-card .jp-mgal-t.on,
.joma-post .jp-grid .jp-card .jp-mgal-t:hover{border-width:2px!important}

/* la galeria de fotos no hace zoom: se marca con color */
.joma-post .jp-gal a{transition:border-color .18s ease, box-shadow .18s ease}
.joma-post .jp-gal a:hover img{transform:none!important}
.joma-post .jp-gal a:hover{border-color:#009ecf;box-shadow:0 6px 20px rgba(0,158,207,.14)}

/* las filas de cuadricula tampoco se mueven */
.joma-post .jp-vrow,.joma-post .jp-vrow:hover{transform:none!important}
.joma-post .jp-vrow{transition:border-color .18s ease}
.joma-post .jp-vrow:hover{border-color:#b9c0cc}

/* --- 1b. NORMA FIJA v95: NUNCA se ve el recuadro blanco de una foto.
       Las fotos recortadas sobre blanco se funden con multiply, igual que la
       foto decorativa del hero. --- */
.joma-post .jp-gal img{mix-blend-mode:multiply;background:transparent}
.joma-post .jp-gal a{background:#fff}

/* --- 2. iconos mas grises --- */
.joma-post .jp-vic{color:#a2aab8}
.joma-post .jp-vic svg{stroke-width:1.15}
/* los numeros de los pasos son informacion, no adorno: un punto mas oscuros
   y algo mas grandes para que se lean */
.joma-post .jp-vrow[id^="paso-"] .jp-vic{color:#5b6070}
.joma-post .jp-vrow[id^="paso-"] .jp-vic svg{width:30px;height:30px;stroke-width:1.3}

/* --- 2b. UN ENLACE TIENE QUE PARECER UN ENLACE.
       El motor solo daba color y subrayado a los <a> de dentro de .jp-prose;
       los parrafos sueltos del cuerpo dejaban el enlace en gris y no se veia. --- */
.joma-post #article p > a:not(.jp-tomenu),
.joma-post #article li > a:not(.jp-tomenu),
.joma-post #article dd > a,
.joma-post #article .jp-vrow p a{
  color:var(--link)!important;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:600;
}
.joma-post #article p > a:not(.jp-tomenu):hover,
.joma-post #article li > a:not(.jp-tomenu):hover,
.joma-post #article .jp-vrow p a:hover{color:var(--link-hover)!important}
/* el "volver arriba" es navegacion, no un enlace de lectura */
.joma-post #article .jp-back > a{font-weight:700;text-decoration:none}

/* --- 3. mas aire entre el final de una seccion y el titulo de la siguiente --- */
.joma-post h3.jp-section{margin-top:72px!important}
.joma-post h3.jp-section:first-of-type{margin-top:44px!important}

/* --- 4. aire entre el texto y los bloques: fotos, fichas, tablas, cuadriculas.
       Un par de lineas en blanco arriba y abajo, para que respire. --- */
.joma-post .jp-gal,
.joma-post .jp-grid,
.joma-post .jp-vlist,
.joma-post .jp-table-wrap,
.joma-post .jp-glossary,
.joma-post .jp-faq,
.joma-post .jp-store{margin-top:40px!important;margin-bottom:40px!important}
/* el parrafo de entrada de seccion se queda pegado a su titulo, no al bloque */
.joma-post h3.jp-section + .jp-direct{margin-top:18px!important}

@media(max-width:640px){
  .joma-post h3.jp-section{margin-top:52px!important}
  .joma-post .jp-gal,.joma-post .jp-grid,.joma-post .jp-vlist,
  .joma-post .jp-table-wrap,.joma-post .jp-glossary,
  .joma-post .jp-faq,.joma-post .jp-store{margin-top:28px!important;margin-bottom:28px!important}
}