/* =====================================================================
   Portada · inec.com · ES y PT
   Franja de novedades (la genera comunes/paginas/novedades-home.php) y
   títulos de sección. Se carga en el bloque de la portada de head.php,
   después de fichas.css. Para quitarla basta con borrar esa línea.
   Colores de la guía de INEC: amarillo #FCCB28 · azul #1B2732
   Iconos: Phosphor Icons (bold), licencia MIT.
   ===================================================================== */

#content{
  --ui:"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Títulos de sección ("Novedades", "Destacados") */
#content .home-seccion{
  margin:26px 0 12px 8px;
  padding:0;
  border:0;
  font:700 20px/1.2 var(--ui);
  letter-spacing:-.01em;
  color:#1B2732;
}

/* ---------- Franja de novedades ---------- */
#content .nov-home{margin:18px 0 0 8px;width:770px;font-family:var(--ui)}

/* Línea del título: "Novedades" a la izquierda; anterior, siguiente y "Ver todas" a la derecha */
#content .nov-home-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
#content .nov-home .home-seccion{margin:0}
#content .nov-home-ctrl{display:flex;align-items:center;gap:6px}
#content .nov-home-btn{
  box-sizing:border-box;
  width:30px;
  height:30px;
  margin:0;
  padding:0;
  border:1px solid #dfe3e7;
  border-radius:50%;
  background:#ffffff center/12px no-repeat;
  cursor:pointer;
  transition:background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}
#content .nov-home-ant{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%231B2732"><path d="M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z"/></svg>')}
#content .nov-home-sig{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%231B2732"><path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"/></svg>')}
#content .nov-home-btn:hover{background-color:#FCCB28;border-color:#FCCB28}
#content .nov-home-btn:active{transform:scale(.94)}
#content .nov-home-btn:focus-visible,
#content .nov-home-todo:focus-visible{outline:2px solid #1B2732;outline-offset:2px}
/* Los botones de avance solo aparecen cuando el JavaScript de la cinta está activo */
#content .nov-home:not(.nov-home-activa) .nov-home-btn{display:none}
#content .nov-home-todo{
  display:inline-flex;
  align-items:center;
  gap:7px;
  box-sizing:border-box;
  height:30px;
  margin-left:4px;
  padding:0 12px 0 14px;
  border-radius:999px;
  background:#FCCB28;
  color:#1B2732;
  font:700 12.5px/1 var(--ui);
  text-decoration:none;
  white-space:nowrap;
  transition:filter 150ms ease;
}
#content .nov-home-todo::after{content:"";width:12px;height:12px;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="%231B2732"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"/></svg>') center/contain no-repeat;transition:transform 150ms ease}
#content .nov-home-todo:hover{filter:brightness(1.05);color:#1B2732}
#content .nov-home-todo:hover::after{transform:translateX(2px)}

/* Ventana de la cinta, con los bordes difuminados. Sin JavaScript se
   desplaza a mano; con él la mueve el script de novedades-home.php. */
#content .nov-home-cinta{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
#content .nov-home-activa .nov-home-cinta{overflow:hidden}
#content .nov-home-pista{display:flex;gap:10px;width:max-content;padding:2px 0;will-change:transform}
#content .nov-home:not(.nov-home-activa) .nov-home-item[aria-hidden="true"]{display:none}

/* Recuadro de cada novedad: foto, nombre y referencia */
#content .nov-home-item{
  flex:none;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  width:150px;
  padding:6px 6px 10px;
  background:#ffffff;
  border:1px solid #e4e6e9;
  border-radius:14px;
  color:#1f2023;
  text-decoration:none;
  transition:border-color 200ms ease, box-shadow 200ms ease;
}
#content .nov-home-foto{
  display:flex;
  align-items:center;
  justify-content:center;
  height:84px;
  margin:0 0 8px;
  background:#f3f4f6;
  border-radius:9px;
  overflow:hidden;
}
#content .nov-home-foto img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border:0;mix-blend-mode:multiply}
#content .nov-home-nombre{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:32px;
  margin:0 4px 8px;
  font:600 12px/1.35 var(--ui);
}
#content .nov-home-ref{
  align-self:flex-start;
  margin:auto 4px 0;
  padding:5px 9px;
  border-radius:999px;
  background:#FCCB28;
  font:700 11px/1 var(--ui);
  font-variant-numeric:tabular-nums;
  color:#1B2732;
}
@media (hover:hover) and (pointer:fine){
  #content .nov-home-item:hover{border-color:#d4d7db;box-shadow:0 10px 22px -14px rgba(20,24,30,.3)}
  #content .nov-home-item:hover .nov-home-nombre{text-decoration:underline;text-decoration-color:#FCCB28;text-decoration-thickness:2px;text-underline-offset:3px}
}
#content .nov-home-item:focus-visible{outline:2px solid #1B2732;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  #content .nov-home-item,
  #content .nov-home-btn,
  #content .nov-home-todo,
  #content .nov-home-todo::after{transition:none}
}