/* Papelería El Compàs — каталог и карточка товара. Общая система — в estilo.css. */
/* ════════════════════ каталог ════════════════════ */

.cat-cab { padding-block: 10px 8px; overflow-x: clip; }
.cat-cab__env { display: grid; gap: 8px; }
.cat-cab__texto { display: grid; gap: 14px; align-content: start; }
.cat-cab__texto .pequeno { max-width: 52ch; }
.cat-cab__collage { position: relative; height: 270px; margin-top: 8px; }
.tapete { position: absolute; width: 250px; height: 250px; left: 50%; top: 10px; margin-left: -125px; border-radius: 50%; box-shadow: var(--sombra-hoja); }
.tapete__arco { position: absolute; width: 300px; height: 300px; left: 50%; top: -15px; margin-left: -150px; opacity: .7; }
.col { position: absolute; width: 108px; height: 108px; filter: drop-shadow(0 8px 10px rgba(29, 36, 51, .16)); transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.col--1 { left: calc(50% - 118px); top: 34px; transform: rotate(-9deg); width: 132px; height: 132px; }
.col--2 { left: calc(50% + 6px); top: 12px; transform: rotate(12deg); }
.col--3 { left: calc(50% + 20px); top: 124px; transform: rotate(-6deg); }
.col--4 { left: calc(50% - 96px); top: 150px; transform: rotate(18deg); width: 92px; height: 92px; }
.col--5 { left: calc(50% - 30px); top: 104px; transform: rotate(-24deg); width: 84px; height: 84px; }
.cat-cab__collage:hover .col--1 { transform: rotate(-4deg) translateY(-4px); }
.cat-cab__collage:hover .col--2 { transform: rotate(18deg); }
.cat-cab__nota { position: absolute; right: 4px; bottom: 0; }
@media (min-width: 768px) {
  .cat-cab__collage { height: 330px; }
  .tapete { width: 300px; height: 300px; margin-left: -150px; }
  .tapete__arco { width: 360px; height: 360px; margin-left: -180px; top: -20px; }
}
@media (min-width: 1024px) {
  .cat-cab { padding-block: 22px 18px; }
  .cat-cab__env { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 32px; }
  .cat-cab__collage { height: 420px; margin-top: 0; }
  .tapete { width: 360px; height: 360px; margin-left: -180px; top: 30px; }
  .tapete__arco { width: 430px; height: 430px; margin-left: -215px; top: -5px; }
  .col { width: 136px; height: 136px; }
  .col--1 { width: 170px; height: 170px; left: calc(50% - 160px); top: 70px; }
  .col--2 { left: calc(50% + 10px); top: 46px; }
  .col--3 { left: calc(50% + 34px); top: 196px; }
  .col--4 { left: calc(50% - 128px); top: 238px; width: 112px; height: 112px; }
  .col--5 { left: calc(50% - 40px); top: 174px; width: 104px; height: 104px; }
  .cat-cab__nota { right: 18px; bottom: 30px; }
}

.cat-lista { padding-bottom: clamp(56px, 7vw, 96px); }
.barra-filtros { display: grid; gap: 12px; padding-block: 16px 18px; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--linea); }
.filtros { display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px 4px; border: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.filtros::-webkit-scrollbar { display: none; }
.filtro { position: relative; flex: none; --c: var(--tinta); }
.filtro--azul { --c: var(--azul); } .filtro--verde { --c: var(--verde); } .filtro--rojo { --c: var(--rojo); } .filtro--gris { --c: #7d8698; }
.filtro input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.filtro span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px;
  border: 1.5px solid var(--linea-2); border-radius: var(--r); background: #fff; font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.filtro span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.filtro small { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); background: var(--mesa); border-radius: 10px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.filtro:hover span { border-color: var(--tinta); }
.filtro input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.filtro input:checked + span::before { background: #fff; }
.filtro input:checked + span small { background: rgba(255, 255, 255, .2); color: #fff; }
.filtro input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.barra-filtros__der { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filtros__cuenta { font-size: 14.5px; color: var(--tinta-3); font-weight: 500; margin: 14px 0 18px; }
.orden { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.orden select {
  min-height: 44px; padding: 0 36px 0 12px; font-size: 16px; font-weight: 500; border: 1.5px solid var(--linea-2); border-radius: var(--r);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d2433' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
@media (min-width: 768px) {
  .filtros { margin: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 1024px) {
  .barra-filtros { grid-template-columns: 1fr auto; align-items: center; }
}

.rejilla-prod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-auto-flow: dense; }
.prod { min-width: 0; }
.prod__enlace {
  display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 12px; overflow: hidden;
  text-decoration: none; color: var(--tinta);
  box-shadow: 0 0 0 1px rgba(29, 36, 51, .1), 0 12px 24px -20px rgba(29, 36, 51, .55);
  transition: transform .3s cubic-bezier(.3, .7, .2, 1), box-shadow .3s;
}
.prod__enlace:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(29, 36, 51, .16), 0 24px 32px -22px rgba(29, 36, 51, .6); }
.prod__foto {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / .92;
  background-color: var(--papel); border-bottom: 1px solid var(--cuadro);
  background-image: linear-gradient(var(--cuadro) 1px, transparent 1px), linear-gradient(90deg, var(--cuadro) 1px, transparent 1px);
  background-size: 15px 15px; background-position: center;
}
.prod__foto svg { width: 70%; height: auto; transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.prod__enlace:hover .prod__foto svg { transform: rotate(-6deg) scale(1.06); }
.prod__sello {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 4px; transform: rotate(-3deg);
  background: var(--azul); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3;
}
.prod__txt { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 14px; flex: 1; }
.prod__cat { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.prod__nombre { font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
.prod__desc { display: none; color: var(--tinta-2); font-size: 14.5px; line-height: 1.5; margin-top: 4px; }
.prod__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.prod__precio { font-size: 19px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod__colores { display: flex; gap: 5px; }
.prod__colores i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(29, 36, 51, .22); }
.prod--grande, .prod--ancha { grid-column: span 2; }
.prod--grande .prod__desc, .prod--ancha .prod__desc { display: block; }
.prod--grande .prod__nombre, .prod--ancha .prod__nombre { font-size: 19px; }
.prod--grande .prod__precio { font-size: 24px; }
.prod--ancha .prod__enlace { flex-direction: row; }
.prod--ancha .prod__foto { aspect-ratio: auto; width: 46%; flex: none; border-bottom: 0; border-right: 1px solid var(--cuadro); }
.prod--grande .prod__foto svg { width: 52%; }
.prod__ficha { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prod__ficha span { display: inline-grid; padding: 6px 10px; border-radius: 6px; background: var(--mesa); font-size: 14px; font-weight: 600; line-height: 1.25; }
.prod__ficha small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.prod--ancha .prod__foto svg { width: 82%; }
.prod-nota {
  position: relative; align-self: start; display: flex; flex-direction: column; gap: 10px; padding: 28px 16px 18px; margin-top: 10px;
  background: var(--amarillo-claro); border-radius: 3px; transform: rotate(-1.4deg);
  box-shadow: 0 1px 1px rgba(29, 36, 51, .08), 0 16px 24px -20px rgba(29, 36, 51, .55);
}
.prod-nota .cinta { width: 80px; height: 24px; top: -11px; }
.prod-nota__tit { font-weight: 700; font-size: 18px; letter-spacing: -.015em; line-height: 1.2; }
.prod-nota p:not([class]) { font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.prod-nota .estado { font-size: 13.5px; margin-top: 4px; }
.prod-promo a {
  display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 210px; padding: 18px 16px;
  border-radius: 12px; background: var(--rojo-texto); color: #fff; text-decoration: none; position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.3, .7, .2, 1);
}
.prod-promo a::after { content: ""; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .35); }
.prod-promo a:hover { transform: translateY(-4px) rotate(-1deg); }
.prod-promo__num { font-size: 50px; font-weight: 700; letter-spacing: -.05em; line-height: 1; position: relative; }
.prod-promo__txt, .prod-promo__ir { position: relative; }
.prod-promo__bolsa { position: absolute; right: -14px; bottom: -8px; width: 58%; max-width: 150px; transform: rotate(-8deg); opacity: .96; transition: transform .4s cubic-bezier(.3, .7, .2, 1); }
.prod-promo a:hover .prod-promo__bolsa { transform: rotate(-3deg) translateY(-4px); }
.prod-promo__txt { font-weight: 600; font-size: 16px; line-height: 1.3; }
.prod-promo__ir { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; font-size: 15px; }
.prod-promo__ir svg { width: 20px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 700px) {
  .rejilla-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .prod--grande { grid-row: span 2; }
  .prod--grande .prod__foto { aspect-ratio: auto; flex: 1; min-height: 260px; }
  .prod--grande .prod__txt { flex: none; }
  .prod__txt { padding: 14px 16px 16px; }
  .prod__nombre { font-size: 15.5px; }
}
@media (min-width: 1024px) {
  .rejilla-prod { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .prod--grande .prod__txt { padding: 18px 22px 22px; }
  .prod--grande .prod__nombre { font-size: 23px; }
  .prod--grande .prod__precio { font-size: 28px; }
}

/* доска мелом */
.pizarra-sec__env { display: grid; gap: 36px; }
.pizarra-sec__texto { display: grid; gap: 14px; align-content: start; }
.pizarra {
  position: relative; padding: 26px 20px 24px; border-radius: 10px; color: #f3f1ea;
  background: #25302d radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .06), transparent 60%);
  box-shadow: inset 0 0 0 10px #b98a52, inset 0 0 0 12px #8e6436, inset 0 0 40px 10px rgba(0, 0, 0, .35), 0 28px 40px -28px rgba(29, 36, 51, .7);
  padding: 34px 30px 30px;
}
.pizarra__tit {
  font-weight: 700; font-size: 25px; letter-spacing: -.02em; margin-bottom: 14px; display: inline-block;
  text-shadow: 0 0 1px rgba(255, 255, 255, .5); border-bottom: 2px dashed rgba(243, 241, 234, .45); padding-bottom: 6px;
}
.pizarra__lista { display: grid; gap: 0 28px; }
.pizarra__lista li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: 15.5px; text-shadow: 0 0 1px rgba(255, 255, 255, .35); }
.pizarra__lista li span { flex: 1; display: flex; align-items: baseline; gap: 10px; }
.pizarra__lista li span::after { content: ""; flex: 1; border-bottom: 2px dotted rgba(243, 241, 234, .35); transform: translateY(-4px); min-width: 16px; }
.pizarra__lista b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pizarra__pie { margin-top: 14px; font-size: 13.5px; color: #c4cbc4; }
.pizarra__tiza { position: absolute; right: 38px; bottom: 16px; width: 46px; height: 11px; border-radius: 3px; background: #f3f1ea; transform: rotate(-8deg); box-shadow: 0 2px 2px rgba(0, 0, 0, .3); }
@media (min-width: 768px) {
  .pizarra__lista { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .pizarra-sec__env { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: center; }
  .pizarra { padding: 40px 42px 36px; }
}

/* оторванный лист */
.encargo { padding-bottom: clamp(64px, 8vw, 110px); }
.hoja-rota {
  --margen-x: 30px; display: grid; gap: 20px; padding: 40px 20px 46px 48px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 12px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 12px repeat-x;
}
.hoja-rota .cinta { left: auto; right: 40px; transform: rotate(6deg); top: 0; }
.hoja-rota__txt { display: grid; gap: 10px; max-width: 60ch; }
.hoja-rota .btn { justify-self: start; }
@media (max-width: 479px) { .hoja-rota .btn { width: 100%; } .hoja-rota .btn svg { display: none; } }
@media (min-width: 900px) {
  .hoja-rota { --margen-x: 64px; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: 46px 48px 54px 96px; }
}

/* ════════════════════ карточка товара ════════════════════ */
.ficha-prod { padding-block: 10px clamp(40px, 6vw, 72px); }
.ficha-prod__env { display: grid; gap: 30px; margin-top: 6px; }
.alfombra {
  position: relative; aspect-ratio: 1 / .9; border-radius: 16px; overflow: hidden;
  background-color: #dcefe5;
  background-image:
    linear-gradient(rgba(31, 157, 107, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 157, 107, .22) 1px, transparent 1px),
    linear-gradient(rgba(31, 157, 107, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 157, 107, .1) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; background-position: 30px 30px;
  box-shadow: inset 0 0 0 1px rgba(31, 157, 107, .35), 0 26px 40px -30px rgba(29, 36, 51, .6);
}
.alfombra__regla { position: absolute; display: flex; color: #157a52; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.alfombra__regla--h { left: 30px; top: 6px; right: 0; }
.alfombra__regla--h i { flex: none; width: 40px; font-style: normal; transform: translateX(-50%); text-align: center; }
.alfombra__regla--v { top: 30px; left: 6px; bottom: 0; flex-direction: column; }
.alfombra__regla--v i { flex: none; height: 40px; font-style: normal; transform: translateY(-50%); line-height: 1; display: flex; align-items: center; }
.alfombra__diag { position: absolute; left: 30px; top: 30px; width: 150%; height: 1px; background: rgba(31, 157, 107, .4); transform-origin: 0 0; transform: rotate(45deg); }
.alfombra__ilus { position: absolute; left: 50%; top: 50%; width: 62%; height: auto; transform: translate(-50%, -48%); filter: drop-shadow(0 16px 16px rgba(29, 36, 51, .18)); }
.alfombra__ilus.gira { animation: gira .5s cubic-bezier(.3, .7, .2, 1); }
@keyframes gira { 40% { transform: translate(-50%, -52%) rotate(-5deg) scale(1.04); } }
.alfombra__nota { position: absolute; right: 22px; bottom: 20px; color: #157a52; font-size: 28px; }
.ficha-prod__info { display: grid; gap: 18px; align-content: start; }
.ficha-prod__info .titulo { font-size: clamp(32px, 4.4vw, 48px); }
.ficha-prod__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.ficha-prod__precio b { font-size: 38px; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ficha-prod__precio span { font-size: 14px; color: var(--tinta-3); }
.colores { border: 0; margin: 0; padding: 0; min-width: 0; }
.colores[hidden] { display: none; }
.colores legend { padding: 0; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.colores legend b { font-weight: 700; }
.colores__lista { display: flex; flex-wrap: wrap; gap: 6px; }
.color { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.color::before { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(29, 36, 51, .25); transition: transform .2s; }
.color::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2.5px solid transparent; transition: border-color .2s; }
.color:hover::before { transform: scale(1.08); }
.color input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.color:has(input:checked)::after { border-color: var(--tinta); }
.color:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }
.ficha-prod__comprar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 16px; border-block: 1px dashed var(--linea-2); }
.ficha-prod__total { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--tinta-3); }
.ficha-prod__total b { font-size: 22px; color: var(--tinta); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.garantias { display: grid; gap: 10px; margin-top: 4px; }
.garantias li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--tinta-2); }
.garantias svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .ficha-prod__env { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: start; }
  .alfombra { position: sticky; top: calc(var(--alto-cab) + 20px); }
}

.specs__env { display: grid; gap: 30px; }
.specs__tabla { --margen-x: 30px; padding: var(--renglon) 20px var(--renglon) 48px; }
.specs__tabla h2 { height: calc(var(--renglon) * 2); display: flex; align-items: flex-end; padding-bottom: 6px; }
.specs__tabla dl > div { display: flex; align-items: flex-end; gap: 10px; height: var(--renglon); padding-bottom: 5px; }
.specs__tabla dt { flex: none; color: var(--tinta-3); font-size: 15px; }
.specs__tabla dt::after { content: ""; }
.specs__tabla dd { flex: 1; display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: 15.5px; }
.specs__tabla dd::before { content: ""; flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(29, 36, 51, .25); transform: translateY(-4px); }
.specs__listas { display: grid; gap: 12px; align-content: start; }
@media (min-width: 900px) {
  .specs__env { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .specs__tabla { --margen-x: 56px; padding: var(--renglon) 44px var(--renglon) 84px; }
}
.relacionados__cab { display: flex; align-items: end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 26px; }
.relacionados__lista { grid-auto-flow: row; }
@media (max-width: 699px) {
  .relacionados__lista { display: flex; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 22px; gap: 12px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .relacionados__lista::-webkit-scrollbar { display: none; }
  .relacionados__lista .prod { flex: none; width: 62%; scroll-snap-align: start; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .relacionados__lista .prod:nth-child(4) { display: none; }
}