/* ===== CATÁLOGO · "Plano de medidas" =====
   Cianotipo azul de la marca, láminas de papel con sus medidas a la vista. */
.cat-page {
  --plano: #15427f;
  --plano-oscuro: #0f2e5e;
  --papel: #f4f7fc;
  --trazo: #f2f6fc;
  --cota: #c0392b;
  --serif: 'Poppins', 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* ----- Portada de plano ----- */
.cat-hero {
  position: relative;
  color: var(--trazo);
  background-color: var(--plano);
  background-image:
    linear-gradient(rgba(242, 246, 252, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 246, 252, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(242, 246, 252, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 246, 252, 0.04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
.cat-hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.cat-hero h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 1.4rem; text-wrap: balance; }
.cat-hero p { max-width: 46ch; font-size: 1.05rem; line-height: 1.7; color: rgba(242, 246, 252, 0.88); }
.cat-plano { width: 100%; height: auto; color: var(--trazo); overflow: visible; }
.cat-plano .cotas { color: var(--cota); stroke: var(--cota); }
.cat-plano .cifras { fill: var(--trazo); font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-plano .cifras text { paint-order: stroke; stroke: var(--plano); stroke-width: 6px; }
@media (max-width: 860px) {
  .cat-hero-inner { grid-template-columns: 1fr; }
  .cat-plano { max-width: 420px; }
}

/* El dibujo se traza solo al entrar */
@media (prefers-reduced-motion: no-preference) {
  .cat-plano .trazo path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cat-trazo 1.6s cubic-bezier(.3, .7, .2, 1) 0.2s forwards; }
  .cat-plano .cotas { opacity: 0; animation: cat-cota 0.6s ease 1.5s forwards; }
  .cat-plano .cifras { opacity: 0; animation: cat-cota 0.6s ease 1.8s forwards; }
  @keyframes cat-trazo { to { stroke-dashoffset: 0; } }
  @keyframes cat-cota { to { opacity: 1; } }
}

/* ----- Barra de filtros ----- */
.cat-tools { position: sticky; top: 72px; z-index: 60; background: var(--plano-oscuro); border-bottom: 1px solid rgba(242, 246, 252, 0.18); }
.cat-tools-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.25rem; max-width: 1120px; margin: 0 auto; }
.cat-chips { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1.5px solid rgba(242, 246, 252, 0.55); background: transparent; color: var(--trazo); border-radius: 2px; padding: 0.5rem 0.9rem; font: 600 0.9rem 'Inter', sans-serif; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.chip:hover { border-color: var(--trazo); }
.chip[aria-pressed="true"] { background: var(--trazo); border-color: var(--trazo); color: var(--plano-oscuro); }
.chip .n { margin-left: 0.5rem; font: 600 0.8rem var(--mono); font-variant-numeric: tabular-nums; opacity: 0.8; }
.cat-selects { display: flex; gap: 0.9rem; flex: none; }
.cat-para { display: flex; align-items: center; gap: 0.5rem; font: 600 0.8rem var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(242, 246, 252, 0.8); }
.cat-para select { font: 600 0.9rem 'Inter', sans-serif; color: var(--trazo); border: 1.5px solid rgba(242, 246, 252, 0.55); border-radius: 2px; padding: 0.45rem 0.6rem; background: var(--plano-oscuro); letter-spacing: 0; text-transform: none; }
.chip:focus-visible, .cat-para select:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }

/* ----- Secciones ----- */
.cat-page main { background: var(--papel); }
.cat-section { padding: 3rem 0 1rem; scroll-margin-top: 140px; }
.cat-section h2 { display: flex; align-items: baseline; gap: 1.25rem; font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--plano-oscuro); margin-bottom: 0.6rem; }
.cat-section h2::after { content: ""; flex: 1; border-bottom: 1.5px solid var(--plano); transform: translateY(-0.25em); }
.cat-section .cat-intro { color: #3f5373; max-width: 60ch; margin-bottom: 1.75rem; line-height: 1.65; }
.cat-section[hidden], .pcard[hidden] { display: none; }

.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 720px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1040px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ----- Lámina (tarjeta) ----- */
.pcard { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--plano); border-radius: 2px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
@media (hover: hover) { .pcard:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--plano); } }
.pcard-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1.5px solid var(--plano);
  background: #fff; }
.pcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.pcard-media .alt { opacity: 0; transition: opacity 0.35s ease; }
@media (hover: hover) { .pcard:hover .alt, .pcard-media:focus-visible .alt { opacity: 1; } }
.pcard-num { position: absolute; right: 0.5rem; top: 0.5rem; z-index: 2; font: 600 0.75rem var(--mono); font-variant-numeric: tabular-nums; color: #fff; background: var(--cota); padding: 0.15rem 0.45rem; border-radius: 1px; }
.pcard-tag { position: absolute; left: 0; bottom: 0.7rem; z-index: 2; font: 600 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.7rem 0.3rem 0.6rem; }
.pcard-tag.agotado { background: var(--plano-oscuro); color: #fff; }
.pcard-tag.destacado { background: #ffd27a; color: #4a3000; }
.pcard-body { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0.9rem 0.95rem; flex: 1; }
.pcard h3 { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--plano-oscuro); }
.pcard-brand { font: 600 0.74rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #5a6b86; }
/* La medida con su línea de cota */
.pcard-dim { position: relative; margin: 0.6rem 0 0.2rem; padding-top: 0.55rem; border-top: 1.5px solid var(--cota); font: 600 0.9rem var(--mono); font-variant-numeric: tabular-nums; color: var(--cota); text-align: center; }
.pcard-dim::before, .pcard-dim::after { content: ""; position: absolute; top: -7px; width: 1.5px; height: 12px; background: var(--cota); }
.pcard-dim::before { left: 0; } .pcard-dim::after { right: 0; }
.pcard-meta { font-size: 0.84rem; color: #4a5c78; line-height: 1.45; margin-top: 0.3rem; }
.pcard-cta { margin-top: auto; padding-top: 0.8rem; }
.btn-consultar { display: flex; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap; width: 100%; padding: 0.62rem 0.8rem; border-radius: 2px; border: 1.5px solid var(--green-wa); background: transparent; color: var(--green-wa); font: 700 0.85rem 'Inter', sans-serif; transition: background var(--transition), color var(--transition); }
.btn-consultar:hover { background: var(--green-wa); color: #fff; }
.btn-consultar:focus-visible { outline: 3px solid var(--plano); outline-offset: 2px; }
@media (max-width: 719px) { .btn-consultar .mas { display: none; } }

.cat-empty { padding: 4rem 0; text-align: center; color: #3f5373; }
.cat-empty .btn { margin-top: 1.25rem; }
.cat-aviso { background: #fff7e0; border-bottom: 1px solid #f3d98b; color: #6b4a00; text-align: center; padding: 0.6rem 1rem; font-size: 0.9rem; font-weight: 600; }
.cat-nota { padding: 2.5rem 0 4.5rem; color: #3f5373; max-width: 62ch; line-height: 1.7; }

/* ===== VENTANA DE PRODUCTO: la lámina ampliada ===== */
.pdialog { border: 1.5px solid var(--plano); padding: 0; border-radius: 2px; width: min(980px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: auto; color: var(--plano-oscuro); background: var(--papel); box-shadow: 10px 10px 0 var(--plano); }
.pdialog::backdrop { background: rgba(15, 46, 94, 0.78); }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.pd-photo { position: relative; border-right: 1.5px solid var(--plano); background: #fff; }
.pd-photo-frame { position: relative; aspect-ratio: 4 / 3; }
.pd-photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.pd-thumbs { display: flex; gap: 0.5rem; padding: 0.75rem; background: #fff; border-top: 1.5px solid var(--plano); }
.pd-thumbs button { position: relative; width: 64px; height: 64px; padding: 0; border: 1.5px solid #9db3d3; border-radius: 2px; overflow: hidden; background: #e9f0fa; cursor: pointer; }
.pd-thumbs button[aria-pressed="true"] { border-color: var(--cota); box-shadow: 0 0 0 1.5px var(--cota); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-info { padding: 2rem 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pd-brand { font: 600 0.78rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #5a6b86; }
.pd-info h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--plano-oscuro); }
.pd-desc { color: #3f5373; line-height: 1.65; }
.pd-info dl { display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: 0.95rem; margin: 0.25rem 0 0.5rem; border-top: 1.5px solid var(--plano); }
.pd-info dt, .pd-info dd { padding: 0.5rem 0; border-bottom: 1px dashed #9db3d3; }
.pd-info dt { font: 600 0.78rem var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: #5a6b86; padding-right: 1.25rem; display: flex; align-items: center; }
.pd-info dd { color: var(--plano-oscuro); font-weight: 500; font-variant-numeric: tabular-nums; }
.pd-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: auto; padding-top: 0.5rem; }
.pd-nota { font-size: 0.85rem; color: #4a5c78; }
.pd-close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 5; width: 44px; height: 44px; border-radius: 2px; border: 1.5px solid var(--plano); background: #fff; color: var(--plano-oscuro); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pd-close:hover { background: var(--plano-oscuro); color: #fff; }
.pd-nav { display: flex; gap: 0.5rem; }
.pd-nav button { flex: 1; padding: 0.6rem 0.8rem; border: 1.5px solid var(--plano); border-radius: 2px; background: #fff; font: 600 0.9rem 'Inter', sans-serif; color: var(--plano-oscuro); cursor: pointer; }
.pd-nav button:hover { background: var(--plano-oscuro); color: #fff; }
.pd-close:focus-visible, .pd-nav button:focus-visible, .pd-thumbs button:focus-visible { outline: 3px solid var(--cota); outline-offset: 2px; }
@media (max-width: 720px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-photo { border-right: 0; border-bottom: 1.5px solid var(--plano); }
  .pd-photo-frame { aspect-ratio: 4 / 3; }
  .cat-tools-inner { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .cat-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .cat-para { flex-direction: column; align-items: stretch; gap: 0.25rem; min-width: 0; }
  .cat-para select { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .pcard, .pcard-media .alt { transition: none; } }

/* Catálogo más ancho: fotos más grandes */
.cat-page main .container, .cat-tools-inner { max-width: 1280px; }

/* ===== Portada: foto del modelo destacado con sus características en lista ===== */
.cat-feature { display: flex; flex-direction: column; gap: 1rem; justify-self: center; width: 100%; max-width: 440px; }
.cat-stage { position: relative; aspect-ratio: 1 / 1; width: 100%; border: 1.5px solid var(--trazo); background: #fff; overflow: hidden; transition: opacity 0.4s ease; }
.cat-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6% 6% 22%; }
.cat-stage.sale { opacity: 0; }
.cat-stage-ficha { transition: opacity 0.4s ease; min-height: 7.5rem; }
.cat-feature:has(.cat-stage.sale) .cat-stage-ficha { opacity: 0; }
.ficha-nombre { font: 700 1.15rem 'Poppins', 'Inter', sans-serif; color: var(--trazo); margin-bottom: 0.5rem; }
.stage-chars { position: absolute; left: 0.9rem; bottom: 0.9rem; z-index: 2; list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.stage-chars li { position: relative; background: #fff; color: var(--plano-oscuro); font: 700 1rem 'Poppins', 'Inter', sans-serif; padding: 0.45rem 0.85rem 0.45rem 1.6rem; border-radius: 2px; box-shadow: 3px 3px 0 var(--plano); }
.stage-chars li::before { content: ""; position: absolute; left: 0.6rem; top: 50%; width: 0.55rem; height: 0.55rem; margin-top: -0.275rem; background: var(--cota); border-radius: 1px; }
@media (prefers-reduced-motion: no-preference) {
  /* una por una: arrancan a los 0,8 s y se van sumando cada 1,1 s */
  .stage-chars li { opacity: 0; animation: caract-in 0.6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(0.8s + var(--i) * 1.1s); }
  @keyframes caract-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
}

/* ===== Filtros y buscador ===== */
.cat-filtros { background: #fff; border-bottom: 1.5px solid var(--plano); }
.cat-filtros:empty { display: none; }
.cat-filtros-det { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
.cat-filtros-det > summary { list-style: none; display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 0; font: 700 0.95rem 'Poppins', 'Inter', sans-serif; color: var(--plano-oscuro); cursor: pointer; }
.cat-filtros-det > summary::-webkit-details-marker { display: none; }
.cat-filtros-det > summary::after { content: "+"; margin-left: auto; font: 600 1.3rem var(--mono); color: var(--plano); }
.cat-filtros-det[open] > summary::after { content: "–"; }
.cat-activos { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; border-radius: 1px; background: var(--cota); color: #fff; font: 600 0.78rem var(--mono); }
.cat-filtros-cuerpo { display: grid; grid-template-columns: 1fr; gap: 0.9rem 1.25rem; padding: 0.9rem 0 1rem; }
.cat-buscar { max-width: 460px; }
.cat-filtros-det:not([open]) .cat-filtros-cuerpo { display: none; }
.cat-buscar, .cat-faceta { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cat-buscar > span, .cat-faceta > span { font: 600 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #5a6b86; }
.cat-buscar input, .cat-faceta select { width: 100%; min-width: 0; font: 500 0.95rem 'Inter', sans-serif; color: var(--plano-oscuro); background: #fff; border: 1.5px solid var(--plano); border-radius: 2px; padding: 0.55rem 0.7rem; }
.cat-buscar input::placeholder { color: #7c8aa3; }
.cat-buscar input:focus-visible, .cat-faceta select:focus-visible, .cat-limpiar:focus-visible { outline: 3px solid var(--cota); outline-offset: 2px; }
.cat-facetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
@media (min-width: 1000px) { .cat-facetas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cat-resultado { display: flex; align-items: center; gap: 1rem; font: 600 0.82rem var(--mono); font-variant-numeric: tabular-nums; color: var(--plano-oscuro); }
.cat-resultado p { margin: 0; }
.cat-limpiar { margin-left: auto; padding: 0.4rem 0.8rem; border: 1.5px solid var(--cota); border-radius: 2px; background: transparent; color: var(--cota); font: 700 0.85rem 'Inter', sans-serif; cursor: pointer; }
.cat-limpiar:hover { background: var(--cota); color: #fff; }
@media (max-width: 759px) {
  .cat-filtros-cuerpo { grid-template-columns: 1fr; }
  .cat-facetas { grid-template-columns: 1fr 1fr; }
}

/* La marca va primero, bien visible */
.pcard-brand { font: 700 0.76rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--plano); }
.pcard h3 { margin-top: 0.1rem; }
.cat-activos[hidden], .cat-limpiar[hidden] { display: none; }
/* El panel de filtros va siempre a la vista, grande y fácil de encontrar */
.cat-filtros { background: var(--papel); border-bottom: 2px solid var(--plano); }
.cat-filtros-det > summary { cursor: default; pointer-events: none; padding: 1rem 0 0.2rem; font-size: 1.15rem; }
.cat-filtros-det > summary::after { content: none; }
.cat-filtros-det > summary::before { content: ""; width: 1.1rem; height: 1.1rem; background: var(--plano); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.cat-filtros-det .cat-filtros-cuerpo { display: grid !important; padding-top: 0.6rem; }
.cat-buscar > span, .cat-faceta > span { font-size: 0.8rem; color: var(--plano-oscuro); }
.cat-buscar input, .cat-faceta select { font-size: 1rem; padding: 0.7rem 0.8rem; min-height: 2.9rem; }
.cat-buscar { max-width: none; }
@media (min-width: 760px) { .cat-filtros-cuerpo { grid-template-columns: minmax(220px, 1fr) 3fr; } }