/* ============================================

   PÁGINAS DE CATEGORÍA — catálogo premium

   ============================================ */



.cat {
  margin-top: var(--navbar-h);
  padding: 1rem var(--inset-pagina) 1.25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}



.cat-volver {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-family: var(--font-body);

  font-size: 0.62rem;

  font-weight: 500;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(var(--beige-claro-rgb), 0.72);

  margin-bottom: 0.85rem;

  padding: 0.3rem 0 0.2rem;

  border-bottom: 1px solid rgba(var(--dorado-rgb), 0.25);

  transition: color 0.35s ease, border-color 0.35s ease, gap 0.35s ease;

}

.pagina-categoria .cat {
  padding-top: 0.5rem;
}

.pagina-categoria .cat-volver {
  position: relative;
  z-index: 2;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0 0.2rem;
}

/* Migas de categoría — mismo tono que Inspiración, sin rediseñar */
.cat-crumb {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(var(--beige-claro-rgb), 0.62);
}

.cat-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cat-crumb li:not(:last-child)::after {
  content: '·';
  margin-left: 0.35rem;
  opacity: 0.55;
}

.cat-crumb a {
  color: inherit;
  text-decoration: none;
}

.cat-crumb a:hover,
.cat-crumb a:focus-visible {
  color: var(--dorado);
}

.cat-crumb [aria-current='page'] {
  color: rgba(var(--beige-claro-rgb), 0.88);
}

/* Bloque editorial SEO + enlaces a Inspiración */
.cat-seo {
  margin: 1.25rem var(--inset-pagina) 0.5rem;
  padding: 1.15rem 0 0.35rem;
  border-top: 1px solid rgba(var(--dorado-rgb), 0.28);
  max-width: 42rem;
}

.cat-seo__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  font-weight: 500;
  color: var(--beige-claro);
  margin: 0 0 0.55rem;
}

.cat-seo__text {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(var(--beige-claro-rgb), 0.82);
  margin: 0 0 0.85rem;
}

.cat-seo__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cat-seo__links a {
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--dorado);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--dorado-rgb), 0.35);
  width: fit-content;
}

.cat-seo__links a:hover,
.cat-seo__links a:focus-visible {
  border-bottom-color: var(--dorado);
}



.cat-volver::before {

  content: '←';

  font-size: 0.95em;

  transition: transform 0.35s ease;

}



.cat-volver:active {

  color: var(--dorado);

  border-bottom-color: var(--dorado);

}



/* --- Intro: bloque centrado · foto solapa mitad superior del cuadro --- */

.pagina-categoria .cat-intro {
  display: flow-root;
  position: relative;
  overflow: visible;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 var(--inset-contenido) clamp(0.85rem, 2vw, 1.2rem);
  --cat-foto-w: clamp(10.5rem, 38vw, 15.5rem);
  --cat-foto-marco: 0.84rem;
  --cat-foto-h: calc(var(--cat-foto-w) * 1.25 + var(--cat-foto-marco));
  --cat-foto-solape: 0.5;
  --cat-foto-inset: clamp(0.55rem, 4.5%, 1rem);
  --cat-logo-w: clamp(6.5rem, 20vw, 10.5rem);
  --cat-inner-pull: 0;
  --cat-franja-y: calc(var(--cat-foto-h) * (1 - var(--cat-foto-solape)));
}

.cat-intro__inner {
  position: relative;
  width: min(100%, 48rem);
  margin-inline: auto;
  padding-top: calc(var(--cat-foto-h) * (1 - var(--cat-foto-solape)));
}

/* Franja dorada — ancho del catálogo, altura del logo, detrás logo y foto */
.pagina-categoria .cat-intro > .cat-intro__franja {
  display: none;
}

@media (min-width: 560px) {
  .pagina-categoria .cat-intro {
    --cat-inner-pull: -4rem;
  }

  .pagina-categoria .cat-intro > .cat-intro__franja {
    container-type: inline-size;
    display: block;
    position: absolute;
    left: 50%;
    right: auto;
    top: calc(var(--cat-inner-pull) + var(--cat-franja-y) - 40px);
    width: min(
      calc(100vw - 4rem - 2 * var(--inset-pagina)),
      calc(var(--max) - 2 * var(--inset-pagina))
    );
    height: clamp(1.35rem, 3.2vw, 2rem);
    z-index: 1;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .pagina-categoria .cat-intro > .cat-intro__franja > .oferta__ornamento {
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 100cqw;
    z-index: 1;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }
}

@supports not (height: 1cqw) {
  .pagina-categoria .cat-intro > .cat-intro__franja > .oferta__ornamento {
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
}

/* Cuadro crema — por encima del logo; tapa su mitad inferior */
.pagina-categoria .cat-cabecera {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: 100%;
  --bloque-ed-padding-y: clamp(0.95rem, 2.2vw, 1.25rem);
  --bloque-ed-padding-x: clamp(1.05rem, 2.6vw, 1.45rem);
  padding: var(--bloque-ed-padding-y) var(--bloque-ed-padding-x);
  color: var(--petroleo);
  background-color: var(--beige-claro);
  background-image: var(--fondo-beige-capas);
  background-size: var(--fondo-degradado-tamano-beige);
  background-repeat: var(--fondo-degradado-repeat-beige);
  border: 1px solid rgba(var(--dorado-rgb), 0.5);
  border-top: none;
  --cat-esq: 12px;
  clip-path: polygon(
    var(--cat-esq) 0,
    calc(100% - var(--cat-esq)) 0,
    100% var(--cat-esq),
    100% calc(100% - var(--cat-esq)),
    calc(100% - var(--cat-esq)) 100%,
    var(--cat-esq) 100%,
    0 calc(100% - var(--cat-esq)),
    0 var(--cat-esq)
  );
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.9);
}

/* Logo Sonata — detrás del cuadro; mitad superior visible sobre petróleo */
.pagina-categoria .cat-cabecera__logo {
  display: none;
}

@media (min-width: 560px) {
  .pagina-categoria .cat-cabecera__logo {
    display: block;
    position: absolute;
    z-index: 2;
    left: 30%;
    top: calc(var(--cat-foto-h) * (1 - var(--cat-foto-solape)));
    width: var(--cat-logo-w);
    transform: translate(-50%, -50%);
    pointer-events: none;
    line-height: 0;
    background: none;
  }

  .pagina-categoria .cat-cabecera__logo img {
    display: block;
    width: 100%;
    height: auto;
    background: transparent;
  }
}

/* Reserva espacio en la esquina superior derecha para que el copy no quede bajo la foto */
.pagina-categoria .cat-cabecera__reserva-foto {
  display: none;
}

@media (min-width: 560px) {
  .pagina-categoria .cat-intro__inner {
    margin-top: var(--cat-inner-pull);
  }

  .pagina-categoria .cat-cabecera__reserva-foto {
    display: block;
    float: right;
    width: calc(var(--cat-foto-w) + var(--cat-foto-marco) - 0.85rem);
    height: calc(var(--cat-foto-h) * var(--cat-foto-solape) + 0.5rem);
    pointer-events: none;
  }
}

.pagina-categoria .cat-cabecera::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(var(--dorado-rgb), 0.2);
  box-shadow: inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.55);
  clip-path: inherit;
  pointer-events: none;
}

.pagina-categoria .cat-cabecera::after {
  display: none;
}

.pagina-categoria .cat-cabecera__titulo {
  color: var(--petroleo);
  border-bottom-color: rgba(var(--dorado-rgb), 0.42);
}

.pagina-categoria .cat-cabecera__titulo::after {
  display: none;
}

.pagina-categoria .cat-cabecera__textos {
  display: block;
  width: 100%;
}

.pagina-categoria .cat-cabecera__texto + .cat-cabecera__texto {
  max-width: none;
  margin-top: 0.65rem;
}

/* Cierre editorial — ancho completo, fuera de la zona de la foto */
.pagina-categoria .cat-cabecera__textos > .cat-cabecera__texto:last-child:not(:first-child) {
  clear: both;
}

.pagina-categoria .cat-cabecera__texto {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: 0.01em;
  color: rgba(var(--petroleo-rgb), 0.92);
}

.pagina-categoria .cat-cabecera__textos > .cat-cabecera__texto:first-child {
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.12rem);
  line-height: 1.48;
  color: var(--petroleo);
}

.pagina-categoria .cat-cabecera__texto + .cat-cabecera__texto {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.52;
  color: rgba(var(--petroleo-rgb), 0.68);
}

/* Foto — sobresale por arriba y solapa el cuadro */
.pagina-categoria .cat-intro__foto {
  position: absolute;
  top: calc(1.25rem + 65px);
  right: var(--cat-foto-inset);
  width: var(--cat-foto-w);
  margin: 0;
  padding: 0.42rem 0.42rem 0.52rem;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(168deg, var(--beige-claro) 0%, var(--beige) 100%);
  border: 1px solid rgba(var(--dorado-rgb), 0.48);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.3),
    -6px 10px 22px rgba(var(--petroleo-rgb), 0.14),
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.88);
  overflow: hidden;
  --cat-esq-foto: 9px;
  clip-path: polygon(
    var(--cat-esq-foto) 0,
    calc(100% - var(--cat-esq-foto)) 0,
    100% var(--cat-esq-foto),
    100% calc(100% - var(--cat-esq-foto)),
    calc(100% - var(--cat-esq-foto)) 100%,
    var(--cat-esq-foto) 100%,
    0 calc(100% - var(--cat-esq-foto)),
    0 var(--cat-esq-foto)
  );
}

.pagina-categoria .cat-intro__foto::before {
  display: none;
}

.pagina-categoria .cat-intro__foto.foto-editorial {
  overflow: hidden;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.3),
    -6px 10px 22px rgba(var(--petroleo-rgb), 0.14),
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.88);
}

.pagina-categoria .cat-intro__foto.foto-editorial::after {
  inset: 0.42rem 0.42rem 0.52rem;
  border-radius: 0;
  background: linear-gradient(
    158deg,
    rgba(var(--petroleo-rgb), 0.1) 0%,
    transparent 44%,
    rgba(var(--turquesa-rgb), 0.08) 100%
  );
}

.pagina-categoria .cat-intro__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: inset 0 1px 4px rgba(var(--petroleo-rgb), 0.07);
}

@media (max-width: 559px) {
  /* La foto abre la sección, como en la composición de escritorio */
  .cat-intro__inner {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }

  .pagina-categoria .cat-intro__foto {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    width: min(74%, 13.75rem);
    margin: 0 auto 0.75rem;
  }

  .pagina-categoria .cat-cabecera {
    border-top: 1px solid rgba(var(--dorado-rgb), 0.5);
  }
}

.pagina-categoria .cat-cabecera__familias {
  color: rgba(var(--petroleo-rgb), 0.55);
}

.cat-cabecera__indice {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--dorado);
  margin-bottom: 0.1rem;
}

.cat-cabecera__titulo {

  font-family: var(--font-display);

  font-size: clamp(1.65rem, 5vw, 2.35rem);

  font-weight: 500;

  color: var(--dorado);

  margin-bottom: 0.3rem;

  padding-bottom: 0.35rem;

  border-bottom: 1px solid rgba(var(--dorado-rgb), 0.35);

}



.cat-cabecera__familias {

  font-family: var(--font-body);

  font-size: 0.72rem;

  font-weight: 500;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: rgba(var(--beige-claro-rgb), 0.72);

  margin-bottom: 0.55rem;

}



.cat-cabecera__textos {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* --- Grid de productos --- */

.cat-grid {
  position: relative;
  z-index: 2;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.85rem;
  padding: 0.65rem;
  background: rgba(var(--beige-claro-rgb), 0.94);
  border: 1px solid rgba(var(--dorado-rgb), 0.32);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.75);
}

/* Colección completa: no heredar posicionamiento de .sel-bloque__grid en seleccion.css */
.pagina-categoria .cat-grid.sel-bloque__grid {
  grid-column: auto;
  margin-bottom: 0;
}




.pagina-categoria .sel-item {

  background: var(--beige-claro);

  color: var(--petroleo);

  border-color: rgba(var(--dorado-rgb), 0.24);

  box-shadow: 0 2px 8px rgba(var(--petroleo-rgb), 0.08);

  min-width: 0;

  max-width: 100%;

}



.pagina-categoria .sel-item::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--dorado), transparent);

  opacity: 0.5;

}



.pagina-categoria .sel-item__fig {

  width: calc(100% - 0.7rem);

  margin: 0.35rem auto 0;

  background: var(--beige);

  border: 1px solid rgba(var(--dorado-rgb), 0.14);

  box-shadow: inset 0 1px 3px rgba(var(--petroleo-rgb), 0.05);

  aspect-ratio: 4 / 5;

  height: auto;

  min-height: var(--sel-prod-h, 128px);

  max-height: none;

}



.pagina-categoria .sel-item__cuerpo {

  border-top: 1px solid rgba(var(--dorado-rgb), 0.1);

  margin-top: 0.35rem;

}



@media (min-width: 560px) {
  .pagina-categoria .cat-intro {
    --cat-foto-w: clamp(11.5rem, 32vw, 16.5rem);
  }

  .cat-intro__inner {
    width: min(100%, 52rem);
  }
}

@media (min-width: 768px) {
  body.pagina-categoria {
    padding-bottom: 0;
  }

  .cat {
    width: min(100% - 4rem, var(--max));
    max-width: var(--max);
    margin-inline: auto;
    padding: 1.5rem var(--inset-pagina) 2rem;
  }

  .pagina-categoria .cat {
    padding-top: 0.65rem;
  }

  .pagina-categoria .cat-intro {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    padding: 0 var(--inset-contenido) clamp(0.85rem, 2vw, 1.2rem);
    --cat-foto-w: clamp(12rem, 26vw, 17rem);
    --cat-foto-inset: clamp(0.65rem, 5%, 1.15rem);
  }

  .cat-intro__inner {
    width: min(100%, 54rem);
  }

  .cat-volver:hover {
    color: var(--dorado);
    border-bottom-color: var(--dorado);
    gap: 0.45rem;
  }

  .cat-volver:hover::before {
    transform: translateX(-3px);
  }

  .pagina-categoria .cat-cabecera__texto {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  .cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.8rem;
    margin-top: 1.15rem;
  }

  .pagina-categoria .cat-grid.sel-bloque__grid {
    grid-column: auto;
    width: 100%;
    max-width: 100%;
  }

  .pagina-categoria .sel-item__fig {
    --sel-prod-h: 148px;
  }
}

@media (min-width: 1024px) {
  .pagina-categoria .cat-intro {
    --cat-foto-w: clamp(12.5rem, 22vw, 17.5rem);
  }

  .cat-intro__inner {
    width: min(100%, 56rem);
  }

  .cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pagina-categoria .sel-item__fig {
    --sel-prod-h: 160px;
  }
}

/* —— Móvil: aligerar scroll en colecciones (sin texturas SVG ni capas GPU) —— */
@media (max-width: 1023px) {
  html.pagina-categoria,
  html.pagina-seleccion,
  body.pagina-categoria,
  body.pagina-seleccion,
  .pagina-categoria,
  .pagina-seleccion {
    background-image: none;
  }

  .pagina-categoria .cat-cabecera {
    background-image: none;
    background-color: var(--beige-claro);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  }

  .pagina-categoria .cat-grid,
  .pagina-seleccion .sel-bloque__grid {
    box-shadow: none;
  }

  .pagina-categoria .sel-item,
  .pagina-seleccion .sel-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 270px;
    box-shadow: none;
    transition: none;
    backface-visibility: visible;
  }

  .pagina-categoria .sel-item__fig,
  .pagina-seleccion .sel-item__fig {
    transform: none;
    backface-visibility: visible;
    box-shadow: none;
    contain: none;
  }

  .pagina-categoria .sel-item__fig img,
  .pagina-seleccion .sel-item__fig img {
    transition: none;
    transform: none;
    backface-visibility: visible;
  }

  .pagina-categoria .foto-editorial img,
  .pagina-seleccion .foto-editorial img {
    filter: none;
  }
}