/* ============================================
   PÁGINA PRODUCTOS — editorial premium
   Azul corporativo · beige · integración visual
   ============================================ */
@import url('producto-modal.css');
@import url('mi-seleccion.css');

/* Tipografía — misma pareja que el home (Cormorant + Inter) */
body.pagina-seleccion,
body.pagina-categoria {
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.pagina-seleccion :is(h1, h2, h3, .sel-bloque__titulo, .sel-item__nombre),
.pagina-categoria :is(h1, h2, h3, .sel-item__nombre, .cat-cabecera__titulo) {
  font-family: var(--font-display);
  font-weight: 500;
}

.pagina-seleccion :is(.sel-item__tipo, .sel-item__origen, .sel-item__detalle, .sel-item__link, .sel-bloque__familias, .sel-bloque__coleccion),
.pagina-categoria :is(.sel-item__tipo, .sel-item__origen, .sel-item__detalle, .sel-item__link, .cat-volver, .cat-cabecera__familias) {
  font-family: var(--font-body);
}

.pagina-seleccion :is(.prod-modal, .mi-sel-panel, .mi-sel-flotante, .mi-sel-toast),
.pagina-categoria :is(.prod-modal, .mi-sel-panel, .mi-sel-flotante, .mi-sel-toast) {
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.pagina-seleccion .prod-modal :is(h2, h3, .prod-modal__nombre, .prod-modal__descripcion, .prod-modal__combina-lista li, .prod-modal__recomendacion),
.pagina-categoria .prod-modal :is(h2, h3, .prod-modal__nombre, .prod-modal__descripcion, .prod-modal__combina-lista li, .prod-modal__recomendacion) {
  font-family: var(--font-display);
}

.pagina-seleccion .mi-sel-panel__titulo,
.pagina-categoria .mi-sel-panel__titulo,
.pagina-seleccion .mi-sel-flotante__titulo,
.pagina-categoria .mi-sel-flotante__titulo {
  font-family: var(--font-display);
}

.pagina-seleccion {
  overflow-x: clip;
}

/* --- Bloques — alternancia azul / beige --- */

.sel-bloque {
  position: relative;
  overflow: visible;
  padding: 1.15rem var(--inset-pagina) 1.15rem;
  scroll-margin-top: calc(var(--navbar-h) + 0.65rem);
  color: var(--petroleo);
}

article.sel-bloque:nth-of-type(odd) {
  color: var(--beige-claro);
}

article.sel-bloque:nth-of-type(even) {
  color: var(--petroleo);
}

article.sel-bloque::before {
  z-index: 2;
}

/* --- Fila editorial foto + texto --- */

.sel-bloque__editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 0.85rem;
}

/* Contenedor — reutiliza ornamentos home (dorado / azul) girados 90° */
.sel-bloque__franja {
  container-type: inline-size;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 5px;
  margin: 0.55rem 0 0;
  overflow: visible;
  pointer-events: none;
}

.sel-bloque__franja > .oferta__ornamento,
.sel-bloque__franja > .destacada__ornamento {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 100cqw;
  z-index: 1;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

@supports not (height: 1cqw) {
  .sel-bloque__franja > .oferta__ornamento,
  .sel-bloque__franja > .destacada__ornamento {
    height: var(--sec-altura-media);
  }
}

/* Marco paspartú beige — integra la fotografía de sección */
.sel-bloque__foto {
  position: relative;
  width: min(76%, 270px);
  margin-left: -0.5rem;
  z-index: 1;
  align-self: start;
  padding: 0.5rem 0.5rem 0.65rem;
  background: linear-gradient(168deg, var(--beige-claro) 0%, var(--beige) 100%);
  border: 1px solid rgba(var(--dorado-rgb), 0.38);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.9);
}

.sel-bloque__foto.foto-editorial {
  overflow: hidden;
}

.sel-bloque__foto.foto-editorial::after {
  inset: 0.5rem 0.5rem 0.65rem;
  background: linear-gradient(
    180deg,
    rgba(var(--petroleo-rgb), 0.06) 0%,
    rgba(var(--turquesa-rgb), 0.1) 100%
  );
}

.foto-seccion img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: contrast(1.03) saturate(0.9) sepia(0.04) brightness(0.99);
}

/* Panel editorial — mismo lenguaje que Regalos / Relato en home */
.sel-bloque__contenido {
  position: relative;
  box-sizing: border-box;
  --bloque-ed-padding-y: clamp(0.95rem, 2.2vw, 1.25rem);
  --bloque-ed-padding-x: clamp(1rem, 2.4vw, 1.45rem);
  padding: var(--bloque-ed-padding-y) var(--bloque-ed-padding-x);
  color: var(--blanco-roto);
  background-color: #2A5E6D;
  background-image: var(--fondo-azul-bloque-capas);
  background-size: var(--fondo-degradado-tamano);
  background-repeat: var(--fondo-degradado-repeat);
  border: 1.5px solid rgba(var(--dorado-rgb), 0.78);
  box-shadow: none;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% 100%,
    0 100%,
    0 10px
  );
}

.sel-bloque__contenido::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(var(--beige-claro-rgb), 0.16);
  pointer-events: none;
}

.sel-bloque__cabecera {
  position: relative;
  margin-bottom: 0.55rem;
  padding-bottom: 0.35rem;
  padding-left: calc(2px + 0.5rem);
}

.sel-bloque__titulo {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4.2vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--dorado);
  margin-bottom: 0.25rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(var(--dorado-rgb), 0.35);
}

.sel-bloque__familias {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--beige-claro-rgb), 0.72);
  line-height: 1.45;
}

.sel-bloque__textos {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sel-bloque__texto {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: 0.01em;
  color: rgba(var(--beige-claro-rgb), 0.94);
}

.sel-bloque__texto + .sel-bloque__texto {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(var(--beige-claro-rgb), 0.76);
}

/* En una columna la foto abre siempre el bloque; la alternancia se mantiene
   con el sangrado lateral de la foto, no invirtiendo el orden de lectura */
.sel-bloque--inv .sel-bloque__foto {
  margin-left: auto;
  margin-right: -0.5rem;
}

/* Móvil: franja vertical (dorada / azul) centrada en el hueco que deja la foto.
   Altura = 60 % de la fila de la foto → 20 % libre arriba y abajo.
   Escritorio no aplica: a partir de 768px la franja vuelve a ser horizontal. */
@media (max-width: 767px) {
  .sel-bloque__editorial {
    display: grid;
    grid-template-columns: minmax(0, 76%) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
  }

  .sel-bloque__foto {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin-left: -0.5rem;
  }

  .sel-bloque__franja {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5px;
    height: auto;
    margin: 0;
    overflow: visible;
  }

  .sel-bloque__franja > .oferta__ornamento,
  .sel-bloque__franja > .destacada__ornamento {
    display: block !important;
    position: relative !important;
    left: auto;
    top: auto;
    right: auto;
    flex: 0 0 5px;
    width: 5px;
    min-width: 5px;
    height: 60%;
    transform: none;
    z-index: 1;
  }

  .sel-bloque__contenido {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .sel-bloque--inv .sel-bloque__editorial {
    grid-template-columns: minmax(0, 1fr) minmax(0, 76%);
  }

  .sel-bloque--inv .sel-bloque__foto {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    margin-right: -0.5rem;
  }

  .sel-bloque--inv .sel-bloque__franja {
    grid-column: 1;
    grid-row: 1;
  }
}

/* --- Bandeja de catálogo — agrupa las cards --- */

.sel-bloque__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  margin-bottom: 0.8rem;
  padding: 0.6rem;
  position: relative;
  z-index: 1;
  background: rgba(var(--beige-claro-rgb), 0.92);
  border: 1px solid rgba(var(--dorado-rgb), 0.28);
  box-shadow:
    0 6px 22px rgba(var(--petroleo-rgb), 0.08),
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.65);
}

article.sel-bloque:nth-of-type(odd) .sel-bloque__grid {
  background: rgba(var(--beige-claro-rgb), 0.94);
  border-color: rgba(var(--dorado-rgb), 0.32);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.75);
}

article.sel-bloque:nth-of-type(even) .sel-bloque__grid {
  background: var(--beige-claro);
  border-color: rgba(var(--petroleo-rgb), 0.14);
}

/* --- Cards producto — beige, enmarcadas --- */

.sel-item {
  display: flex;
  flex-direction: column;
  background: var(--beige-claro);
  color: var(--petroleo);
  border: 1px solid rgba(var(--dorado-rgb), 0.24);
  box-shadow: 0 2px 8px rgba(var(--petroleo-rgb), 0.07);
  overflow: hidden;
  position: relative;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden;
}

.sel-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dorado), transparent);
  opacity: 0.55;
}

.sel-item__fig {
  --sel-prod-h: 128px;
  --sel-paspartu: 0.4rem;
  position: relative;
  height: var(--sel-prod-h);
  aspect-ratio: 4 / 5;
  width: calc(100% - 0.7rem);
  margin: 0.35rem auto 0;
  flex-shrink: 0;
  background: var(--beige);
  padding: var(--sel-paspartu);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(var(--dorado-rgb), 0.14);
  box-shadow: inset 0 1px 3px rgba(var(--petroleo-rgb), 0.05);
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .sel-item__fig {
    filter: contrast(1.03) saturate(0.9) sepia(0.04);
  }
}

.sel-item__etiqueta {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  padding: 0.16rem 0.4rem;
  font-family: var(--font-body);
  font-size: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--beige-claro);
  background: var(--petroleo);
  border-radius: 999px;
  pointer-events: none;
}

.sel-item__etiqueta[hidden] {
  display: none;
}

.sel-item__fig img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sel-item__cuerpo {
  padding: 0.5rem 0.6rem 0.65rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(var(--dorado-rgb), 0.1);
  margin-top: 0.35rem;
}

.sel-item__tipo {
  font-family: var(--font-body);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 0.12rem;
}

.sel-item__nombre {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.06rem;
}

.sel-item__origen {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: rgba(var(--petroleo-rgb), 0.48);
  margin-bottom: 0.08rem;
}

.sel-item__origen:empty {
  display: none;
  margin: 0;
}

.sel-item__detalle {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 300;
  color: rgba(var(--petroleo-rgb), 0.58);
  margin-bottom: 0.4rem;
  flex: 1;
}

.sel-item__link {
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--petroleo);
  border-bottom: 1px solid rgba(var(--petroleo-rgb), 0.32);
  align-self: flex-start;
  padding-bottom: 0.08rem;
  text-decoration: none;
  transition:
    color 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sel-item__link-flecha {
  display: inline-block;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sel-item__link:active {
  color: #1a3f4c;
  border-bottom-color: rgba(var(--petroleo-rgb), 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .sel-item,
  .sel-item__fig img,
  .sel-item__link,
  .sel-item__link-flecha {
    transition: none;
  }
}

/* Enlace colección */

.sel-bloque__coleccion {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petroleo);
  padding: 0.35rem 0 0.2rem;
  border-bottom: 1px solid rgba(var(--dorado-rgb), 0.4);
  transition: color 0.35s ease, border-color 0.35s ease, gap 0.35s ease;
}

.sel-bloque__coleccion::after {
  content: '→';
  font-size: 0.95em;
  line-height: 1;
  transition: transform 0.35s ease, color 0.35s ease;
}

article.sel-bloque:nth-of-type(odd) .sel-bloque__coleccion {
  color: var(--beige-claro);
  border-bottom-color: rgba(var(--dorado-rgb), 0.55);
}

.sel-bloque__coleccion:active,
article.sel-bloque:nth-of-type(odd) .sel-bloque__coleccion:active {
  color: var(--dorado);
  border-bottom-color: var(--dorado);
}

.sel-bloque__coleccion:active::after {
  transform: translateX(3px);
  color: var(--dorado);
}

/* --- CTA final — tarjeta editorial azul (referencia: visita) --- */

:root {
  --sel-cta-asoma: clamp(1.5rem, 3.2vw, 2.1rem);
  --sel-cta-banda: clamp(0.55rem, 1.4vw, 0.8rem);
}

article.sel-bloque:last-of-type {
  position: relative;
  z-index: 2;
  padding-bottom: calc(var(--sel-cta-asoma) + 0.85rem);
}

.sel-cta {
  position: relative;
  z-index: 4;
  overflow: visible;
  padding: 0 var(--inset-pagina) var(--sel-cta-banda);
}

.sel-cta::before {
  z-index: 1;
}

.sel-cta__escena {
  position: relative;
  z-index: 2;
  min-height: var(--sel-cta-banda);
}

.sel-cta__tarjeta {
  position: relative;
  z-index: 12;
  margin: 0;
  transform: translateY(calc(-1 * var(--sel-cta-asoma)));
  margin-bottom: calc(-1 * var(--sel-cta-asoma) + var(--sel-cta-banda));
  padding: clamp(1.35rem, 3.4vw, 1.75rem) clamp(1.25rem, 3.2vw, 1.6rem);
  background-color: #2A5E6D;
  /* Cartelas en las dos esquinas rectas; las achaflanadas quedan limpias */
  background-image:
    linear-gradient(rgba(var(--dorado-rgb), 0.62), rgba(var(--dorado-rgb), 0.62)) top 0.78rem right 0.78rem / 0.72rem 1px no-repeat,
    linear-gradient(rgba(var(--dorado-rgb), 0.62), rgba(var(--dorado-rgb), 0.62)) top 0.78rem right 0.78rem / 1px 0.72rem no-repeat,
    linear-gradient(rgba(var(--beige-claro-rgb), 0.5), rgba(var(--beige-claro-rgb), 0.5)) bottom 0.78rem left 0.78rem / 0.72rem 1px no-repeat,
    linear-gradient(rgba(var(--beige-claro-rgb), 0.5), rgba(var(--beige-claro-rgb), 0.5)) bottom 0.78rem left 0.78rem / 1px 0.72rem no-repeat,
    var(--fondo-azul-bloque-capas);
  background-size: auto, auto, auto, auto, var(--fondo-degradado-tamano);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, var(--fondo-degradado-repeat);
  color: var(--blanco-roto);
  /* Mismo lenguaje que los bloques editoriales: chaflán y filete dorado, sin radio */
  border-radius: 0;
  border: 1.5px solid rgba(var(--dorado-rgb), 0.78);
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.18);
}

.sel-cta__marco {
  position: absolute;
  inset: 5px;
  border-radius: 0;
  pointer-events: none;
  z-index: 0;
  border: 1px solid rgba(var(--beige-claro-rgb), 0.16);
  box-shadow: none;
}

.sel-cta__marco::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 1.1rem;
  right: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(var(--dorado-rgb), 0.62) 0%,
    rgba(var(--beige-claro-rgb), 0.78) 50%,
    rgba(var(--dorado-rgb), 0.62) 100%
  );
  opacity: 0.55;
}

.sel-cta__marco::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 1.4rem;
  right: 1.4rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--beige-claro-rgb), 0.42) 18%,
    rgba(var(--dorado-rgb), 0.38) 50%,
    rgba(var(--beige-claro-rgb), 0.42) 82%,
    transparent
  );
}

/* Velo cálido superior: da profundidad al azul sin añadir cromatismos nuevos */
.sel-cta__tarjeta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 45%;
  background: linear-gradient(
    180deg,
    rgba(var(--dorado-rgb), 0.09) 0%,
    rgba(var(--dorado-rgb), 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.sel-cta__titulo,
.sel-cta__text,
.sel-cta__acciones {
  position: relative;
  z-index: 1;
}

/* Ornamento de apertura: hairline con rombo dorado al centro */
.sel-cta__line {
  position: relative;
  display: block;
  width: min(11rem, 52%);
  height: 6px;
  margin: 0 auto 0.9rem;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--dorado-rgb), 0.5) 26%,
    rgba(var(--dorado-rgb), 0.5) 74%,
    transparent
  );
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
}

.sel-cta__line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--dorado);
  box-shadow: 0 0 0 1px rgba(var(--beige-claro-rgb), 0.3);
}

.sel-cta__titulo {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--dorado);
  margin-bottom: 0.7rem;
  padding-left: 0;
  border-left: none;
}

.sel-cta__titulo::before {
  display: none;
}

/* Filete de cierre bajo el título, como en los bloques editoriales */
.sel-cta__titulo::after {
  content: '';
  display: block;
  width: min(9rem, 48%);
  height: 1px;
  margin: 0.5rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(var(--dorado-rgb), 0.55), transparent);
}

.sel-cta__text {
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 0.86rem + 0.2vw, 1.05rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
  color: rgba(var(--beige-claro-rgb), 0.92);
  margin-bottom: 0.85rem;
  max-width: 32ch;
  margin-inline: auto;
}

.sel-cta__acciones {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0.78rem;
  padding-top: 0.72rem;
}

.sel-cta__acciones::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(var(--dorado-rgb), 0.28),
    rgba(var(--beige-claro-rgb), 0.42) 35%,
    rgba(var(--beige-claro-rgb), 0.42) 65%,
    rgba(var(--dorado-rgb), 0.28)
  );
}

.sel-cta__btn.navbar__cta--wa {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.78rem 1rem;
  text-decoration: none;
  color: var(--beige-claro);
  background:
    linear-gradient(
      152deg,
      rgba(var(--wa-verde-rgb), 0.32) 0%,
      rgba(var(--wa-verde-medio-rgb), 0.96) 48%,
      rgba(var(--wa-verde-oscuro-rgb), 1) 100%
    );
  border: 1px solid rgba(var(--dorado-rgb), 0.52);
  box-shadow:
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.14),
    inset 0 -1px 0 rgba(var(--dorado-rgb), 0.16),
    0 10px 28px rgba(0, 0, 0, 0.22);
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.sel-cta__btn.navbar__cta--wa::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(var(--beige-claro-rgb), 0.12);
  clip-path: inherit;
  pointer-events: none;
}

.sel-cta__btn.navbar__cta--wa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(var(--beige-claro-rgb), 0.1) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
  transition: transform 0.65s ease;
  pointer-events: none;
}

.sel-cta__btn.navbar__cta--wa:active {
  transform: translateY(1px);
  border-color: rgba(var(--dorado-rgb), 0.78);
  box-shadow:
    inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.1),
    0 4px 14px rgba(0, 0, 0, 0.18);
}

.sel-cta__btn.navbar__cta--wa:active::after {
  transform: translateX(120%);
}

.sel-cta__btn .navbar__cta-icon,
.sel-cta__btn .navbar__cta-copy {
  position: relative;
  z-index: 1;
}

.sel-cta__btn .navbar__cta-icon {
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(var(--beige-claro-rgb), 0.24) 0%,
      rgba(var(--wa-verde-rgb), 0.55) 42%,
      rgba(var(--wa-verde-oscuro-rgb), 0.98) 100%
    );
}

.sel-cta__btn .navbar__cta-icon::after {
  border-color: rgba(var(--wa-verde-rgb), 0.5);
}

.sel-cta__btn .navbar__cta-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.sel-cta__btn .navbar__cta-meta {
  white-space: normal;
}

/* --- Desktop --- */

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

  .sel-bloque {
    width: 100%;
    padding: 1.5rem var(--inset-contenido) 1.55rem;
    display: grid;
    grid-template-columns: minmax(220px, 38%) 1fr;
    column-gap: 2.25rem;
    row-gap: 0;
    align-items: start;
  }

  .sel-bloque__editorial {
    display: contents;
    margin-bottom: 0;
  }

  .sel-bloque__foto {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    max-width: 360px;
    margin-left: -1rem;
    padding: 0.6rem 0.6rem 0.75rem;
  }

  .sel-bloque__contenido {
    grid-column: 2;
    grid-row: 1;
    padding: 1rem 1.15rem 1.1rem;
  }

  .sel-bloque__franja {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    width: 100%;
    margin: 0;
    min-height: clamp(1.35rem, 3.2vw, 2rem);
  }

  .sel-bloque__grid {
    grid-column: 1 / -1;
    margin-top: 0.85rem;
  }

  /* Colección completa — fuera de article.sel-bloque */
  .pagina-categoria .cat-grid.sel-bloque__grid {
    grid-column: auto;
    margin-top: 1.15rem;
  }

  .sel-bloque__coleccion {
    grid-column: 1 / -1;
  }

  .sel-bloque--inv {
    grid-template-columns: 1fr minmax(220px, 38%);
  }

  .sel-bloque--inv .sel-bloque__foto {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-left: 0;
    margin-right: -1rem;
  }

  .sel-bloque--inv .sel-bloque__contenido {
    grid-column: 1;
    grid-row: 1;
  }

  .sel-bloque--inv .sel-bloque__franja {
    grid-column: 1;
    grid-row: 2;
  }

  .sel-bloque__texto {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  .sel-bloque__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    padding: 0.75rem;
  }

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

  @media (hover: hover) {
    .sel-item:hover {
      transform: translate3d(0, -7px, 0);
      border-color: rgba(var(--dorado-rgb), 0.38);
      box-shadow: 0 10px 26px rgba(var(--petroleo-rgb), 0.14);
    }

    .sel-item:hover .sel-item__fig img {
      transform: translate3d(0, 0, 0) scale(1.03);
    }

    .sel-item__link:hover {
      color: #1a3f4c;
      border-bottom-color: rgba(var(--petroleo-rgb), 0.52);
    }

    .sel-item__link:hover .sel-item__link-flecha {
      transform: translateX(3px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sel-item:hover {
      transform: none;
    }

    .sel-item:hover .sel-item__fig img {
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  .sel-bloque__coleccion:hover {
    color: var(--dorado);
    border-bottom-color: var(--dorado);
    gap: 0.55rem;
  }

  .sel-bloque__coleccion:hover::after {
    transform: translateX(4px);
    color: var(--dorado);
  }

  .sel-cta__tarjeta {
    width: min(100%, 36rem);
    margin-inline: auto;
    margin-bottom: calc(-1 * var(--sel-cta-asoma) + var(--sel-cta-banda));
  }

  .sel-cta__btn.navbar__cta--wa {
    width: auto;
    padding: 0.42rem 0.95rem 0.42rem 0.45rem;
    gap: 0.65rem;
    overflow: hidden;
    clip-path: polygon(
      8px 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 8px
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .sel-cta__btn.navbar__cta--wa::before {
    inset: 3px;
  }

  .sel-cta__btn.navbar__cta--wa:hover,
  .sel-cta__btn.navbar__cta--wa:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(var(--dorado-rgb), 0.82);
    box-shadow:
      inset 0 1px 0 rgba(var(--beige-claro-rgb), 0.22),
      inset 0 -1px 0 rgba(var(--dorado-rgb), 0.28),
      0 10px 28px rgba(0, 0, 0, 0.28),
      0 0 18px rgba(var(--wa-verde-rgb), 0.22);
  }

  .sel-cta__btn.navbar__cta--wa:hover::after,
  .sel-cta__btn.navbar__cta--wa:focus-visible::after {
    transform: translateX(120%);
  }

  .sel-cta__btn.navbar__cta--wa:focus-visible {
    outline: 1px solid rgba(var(--dorado-rgb), 0.65);
    outline-offset: 3px;
  }

  .sel-cta__btn .navbar__cta-label {
    letter-spacing: 0.14em;
  }
}

/* Bloque SEO editorial (compartido con categorías) */
.pagina-seleccion .cat-seo {
  margin: 1.25rem var(--inset-pagina) 1.5rem;
  padding: 1.15rem 0 0.35rem;
  border-top: 1px solid rgba(var(--dorado-rgb), 0.28);
  max-width: 42rem;
}

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

.pagina-seleccion .cat-seo__text {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(var(--petroleo-rgb, 33, 77, 93), 0.82);
  margin: 0 0 0.85rem;
}

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

.pagina-seleccion .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;
}

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

@media (min-width: 1024px) {
  .sel-bloque__foto {
    max-width: 400px;
  }

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