/* =====================================================================
   Fichas de producto de la portada · inec.com
   Se carga en comunes/paginas/head.php, en el bloque de la portada,
   justo después de destaques.css. Para volver al diseño anterior basta
   con quitar esa línea: no modifica ninguna otra hoja.
   Mantiene el HTML de contentxdef.php tal cual (visitante y cliente).
   ===================================================================== */

/* --- Rejilla: 3 columnas iguales con el mismo aire en las dos direcciones --- */
.destaque-todo{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  height:auto;
  margin-bottom:24px;
}

/* --- Tarjeta --- */
.destaque-todo .destaque-pequeno{
  float:none;
  width:auto;
  height:auto;
  margin:0;
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:8px 8px 14px;
  background:#ffffff none;
  border:1px solid #e4e6e9;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(20,24,30,.05);
  font-family:"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  transition:transform 220ms cubic-bezier(.23,1,.32,1), box-shadow 220ms cubic-bezier(.23,1,.32,1), border-color 220ms ease;
}

/* --- Foto: primero, sobre un fondo gris suave. El blanco de la foto
       se funde con el fondo (multiply). Tamaño real: sin ampliar. --- */
.destaque-todo .imagen-destaque-p{
  order:-1;
  width:auto;
  height:136px;
  margin:0 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  border-radius:9px;
  overflow:hidden;
}
.destaque-todo .imagen-destaque-p a{display:block;line-height:0}
.destaque-todo .imagen-destaque-p img{
  display:block;
  max-width:100%;
  height:auto;
  mix-blend-mode:multiply;
  transition:transform 320ms cubic-bezier(.23,1,.32,1);
}
/* anula el zoom brusco de destaques.css */
.destaque-todo .imagen-destaque-p :hover{transform:none}

/* --- Título --- */
.destaque-todo .link-inicio-pequeno{
  width:auto;
  height:auto;
  padding:0 6px;
  margin:0 0 6px;
}
.destaque-todo .link-inicio-pequeno a{
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.005em;
  color:#1f2023;
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:4; /* el nombre más largo del catálogo (110 caracteres) cabe entero */
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-wrap:pretty;
}
/* toda la tarjeta lleva al producto (mismo enlace que título y foto) */
.destaque-todo .link-inicio-pequeno a::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  z-index:1;
}

/* --- Descripción --- */
.destaque-todo .texto-articulo-destaque-pequeno{
  width:auto;
  height:auto;
  padding:0 6px;
  text-align:left;
  font-family:inherit;
  font-size:12px;
  line-height:1.5;
  color:#5d6168;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.destaque-todo .texto-articulo-destaque-pequeno a{
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}

/* --- Solo clientes con sesión: referencia, stock y precio, abajo del todo --- */
.destaque-todo .divFooterTituloFam{
  float:none;
  width:auto;
  height:auto;
  margin:auto 6px 0;
  padding:10px 0 0;
  border-top:1px solid #eceef0;
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
  z-index:2; /* por encima del enlace de la tarjeta: el semáforo conserva su aviso */
}
.destaque-todo .divRefFam{
  float:none;
  display:block;
  flex:1 1 auto;
  min-width:0;
}
.destaque-todo .divRefFam a{
  font-family:inherit;
  font-size:11px;
  font-weight:500;
  color:#6b7078;
  letter-spacing:.01em;
  margin:0;
}
.destaque-todo .divFooterTituloFam > img{flex:none}
.destaque-todo .divPrecioFam{
  float:none;
  display:block;
  width:auto;
  margin:0;
  font-size:13px;
}
.destaque-todo .divPrecioFam a{
  display:flex;
  align-items:baseline;
  color:#1f2023;
  font-variant-numeric:tabular-nums;
}
.destaque-todo .precioFamEnt,
.destaque-todo .precioFamDec,
.destaque-todo .precioFamEur{
  float:none;
  display:inline;
  margin:0;
  font-family:inherit;
  font-weight:700;
}
.destaque-todo .precioFamEnt{font-size:18px;letter-spacing:-.01em}
.destaque-todo .precioFamDec{font-size:12px}
.destaque-todo .precioFamEur{font-size:13px;margin-left:2px}

/* --- Interacción (solo ratón; en táctil no se queda "pegada") --- */
@media (hover:hover) and (pointer:fine){
  .destaque-todo .destaque-pequeno:hover{
    transform:translateY(-3px);
    border-color:#d4d7db;
    box-shadow:0 14px 28px -14px rgba(20,24,30,.28);
  }
  .destaque-todo .destaque-pequeno:hover .imagen-destaque-p img{transform:scale(1.04)}
  .destaque-todo .destaque-pequeno:hover .link-inicio-pequeno a{
    text-decoration:underline;
    text-decoration-color:#FFC726;
    text-decoration-thickness:2px;
    text-underline-offset:3px;
  }
}
.destaque-todo .destaque-pequeno:active{transform:translateY(-1px) scale(.99)}

/* --- Teclado --- */
.destaque-todo .destaque-pequeno a:focus-visible{
  outline:2px solid #242424;
  outline-offset:2px;
  border-radius:4px;
}
.destaque-todo .destaque-pequeno:has(a:focus-visible){border-color:#242424}

/* --- Selección de texto con el amarillo de la marca --- */
.destaque-todo ::selection{background:#FFC726;color:#1f2023}

/* --- Sin animaciones si el usuario las tiene desactivadas --- */
@media (prefers-reduced-motion:reduce){
  .destaque-todo .destaque-pequeno,
  .destaque-todo .imagen-destaque-p img{transition:none}
  .destaque-todo .destaque-pequeno:hover,
  .destaque-todo .destaque-pequeno:active,
  .destaque-todo .destaque-pequeno:hover .imagen-destaque-p img{transform:none}
}