/* Catálogo: página completa, sección de la portada y piezas compartidas */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Foto o recuadro sin foto ── */
.foto-vacia {
  display: grid; width: 100%; height: 100%; place-items: center;
  background: color-mix(in srgb, var(--c) 16%, #fff);
}
.foto-vacia svg { width: 42%; max-width: 150px; height: auto; overflow: visible; }
.foto-vacia .s-cuerpo { fill: color-mix(in srgb, var(--c) 82%, #000); }
.foto-vacia .s-vidrio { fill: color-mix(in srgb, var(--c) 30%, #fff); }
.foto-vacia .s-linea { fill: none; stroke: color-mix(in srgb, var(--c) 55%, #fff); stroke-width: 3; }
.foto-vacia .s-linea-r { fill: color-mix(in srgb, var(--c) 60%, #000); }
.foto-vacia .s-acento { fill: var(--lime, #d6e653); }

/* ── Tarjeta de producto ── */
.p-card {
  display: grid; width: 100%; gap: 6px; border: 0; padding: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit;
}
.p-card-foto {
  position: relative; display: block; overflow: hidden; aspect-ratio: 1; margin-bottom: 8px;
  border: 1px solid #e1e4dc; background: #fff; transition: border-color .25s ease;
}
.p-card-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.p-card:hover .p-card-foto, .p-card:focus-visible .p-card-foto { border-color: var(--ink); }
.p-card:hover .p-card-foto img { transform: scale(1.04); }
.p-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.p-card-badge {
  position: absolute; top: 10px; left: 10px; padding: 5px 9px; background: var(--lime); color: var(--ink);
  font-size: 9px; font-weight: 780; letter-spacing: .12em;
}
.p-card-robotica {
  position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 9px;
  background: var(--ink); color: #fff; font-size: 9px; font-weight: 760; letter-spacing: .08em;
  line-height: 1.25; text-align: right;
}
.p-card-cat { color: #697066; font-size: 10px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.p-card-nombre { font-size: clamp(16px, 1.25vw, 19px); font-weight: 560; letter-spacing: -.035em; line-height: 1.2; }
.p-card-precio { font-size: clamp(17px, 1.35vw, 21px); font-weight: 720; letter-spacing: -.04em; }
.p-card-precio.consultar { color: #697066; font-size: 15px; font-weight: 600; }

/* ── Página de catálogo ── */
.pagina-catalogo main { min-height: 70vh; }
.cat-hero {
  display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr); gap: 20px 30px; align-items: start;
  padding-block: clamp(52px, 7vw, 100px) clamp(28px, 4vw, 48px);
}
.cat-hero .section-label { margin-top: 14px; }
.cat-hero h1 { margin: 0; font-size: clamp(44px, 5.55vw, 82px); font-weight: 630; letter-spacing: -.075em; line-height: 1.01; }
.cat-hero h1 em { font-style: normal; font-weight: 430; }
.cat-lead { max-width: 560px; margin: 22px 0 0; color: #596058; font-size: 19px; line-height: 1.5; letter-spacing: -.02em; }

.cat-tools {
  position: sticky; z-index: 20; top: 88px; padding-block: 16px 14px;
  border-block: 1px solid rgba(23, 26, 23, .1); background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px);
}
.cat-tools-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cat-close { display: none; }
.cat-search {
  display: flex; flex: 1; align-items: center; min-width: 0; gap: 10px; max-width: 460px; min-height: 46px; padding: 0 16px;
  border: 1px solid #cfd4ca; background: #fff; color: #697066; transition: border-color .2s ease;
}
.cat-search:focus-within { border-color: var(--ink); color: var(--ink); }
.cat-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; }
.cat-sort { display: flex; align-items: center; gap: 10px; color: #697066; font-size: 11px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.cat-sort select {
  min-height: 46px; padding: 0 36px 0 14px; border: 1px solid #cfd4ca; background: #fff; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.cat-title-dot { color: var(--lime); }
.cat-categories { padding-bottom: clamp(42px, 6vw, 80px); }
.cat-categories-label { margin: 0 0 18px; color: #697066; font-size: 12px; font-weight: 700; letter-spacing: .15em; }
.cat-category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cat-category-card {
  position: relative; display: flex; flex: 0 0 var(--cat-card-width, 100%); align-items: center; gap: 16px; min-width: 0; min-height: 142px; padding: 22px 20px;
  border: 1px solid #d9ddd5; border-radius: 22px; background: #fff; color: var(--ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cat-category-card:hover, .cat-category-card[aria-pressed="true"] {
  border-color: var(--category-color); background: color-mix(in srgb, var(--category-color) 17%, #fff);
  box-shadow: 0 12px 30px rgba(23, 26, 23, .07); transform: translateY(-3px);
}
.cat-category-card:focus-visible { outline: 2px solid var(--category-color); outline-offset: 3px; }
.cat-category-logo {
  display: grid; flex: none; width: 62px; height: 62px; place-items: center; overflow: hidden;
  border-radius: 19px; background: color-mix(in srgb, var(--category-color) 17%, #fff);
}
.cat-category-logo img { display: block; width: 38px; height: 38px; object-fit: contain; }
.cat-category-initial { font-size: 31px; font-weight: 720; color: var(--category-color); }
.cat-category-name { min-width: 0; padding-right: 7px; font-size: clamp(16px, 1.25vw, 19px); font-weight: 660; line-height: 1.2; }
.cat-category-arrow { position: absolute; top: 16px; right: 17px; color: #8b9187; font-size: 21px; transition: transform .25s ease, color .25s ease; }
.cat-category-card:hover .cat-category-arrow, .cat-category-card[aria-pressed="true"] .cat-category-arrow { color: var(--ink); transform: translate(2px, -2px); }
.cat-category-all { display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; min-height: 60px; margin-top: 14px; border: 1px solid #d9ddd5; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.cat-category-all:hover { border-color: var(--ink); background: #fff; }
.cat-category-all:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.cat-results { padding-block: 26px clamp(80px, 9vw, 130px); scroll-margin-top: 180px; }
.cat-count { margin: 0 0 22px; color: #697066; font-size: 11px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 22px; margin: 0; padding: 0; list-style: none; }
.cat-grid > li { animation: p-entrar .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes p-entrar { from { opacity: 0; transform: translateY(14px); } }
.cat-empty { padding: 40px 0; text-align: center; }
.cat-empty p { margin: 0 0 20px; color: #596058; font-size: 18px; }

/* esqueleto mientras carga */
.p-esqueleto { display: grid; gap: 10px; }
.p-esqueleto span { display: block; background: linear-gradient(90deg, #eceee8 30%, #f5f6f1 50%, #eceee8 70%) 0 0 / 300% 100%; animation: p-brillo 1.3s ease-in-out infinite; }
.p-esqueleto span:first-child { aspect-ratio: 1; }
.p-esqueleto span:nth-child(2) { width: 40%; height: 10px; }
.p-esqueleto span:nth-child(3) { width: 80%; height: 16px; }
@keyframes p-brillo { to { background-position: -150% 0; } }
.cat-error { padding: 30px; border: 1px solid #e3c9c4; background: #fbf1ef; color: #7a3328; }

/* ── Ficha del producto ── */
.ficha {
  width: min(1000px, 100vw - 48px); max-width: none; height: min(780px, calc(100svh - 48px)); max-height: calc(100svh - 48px); padding: 0; overflow: hidden;
  border: 0; background: var(--paper); color: var(--ink);
}
.ficha[open] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); animation: ficha-entrar .4s cubic-bezier(.2, .8, .2, 1); }
.ficha::backdrop { background: rgba(17, 19, 17, .55); backdrop-filter: blur(4px); }
@keyframes ficha-entrar { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.ficha-media { position: relative; display: grid; min-height: 0; place-items: center; background: #fff; }
.ficha-media img { display: block; width: 100%; height: 100%; max-height: calc(100svh - 48px); object-fit: contain; }
.ficha-media .foto-vacia { aspect-ratio: 1; }
.ficha-zoom {
  position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px;
  border: 1px solid #cfd4ca; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 700; cursor: zoom-in; transition: border-color .2s ease, transform .2s ease;
}
.ficha-zoom:hover { border-color: var(--ink); transform: translateY(-2px); }
.ficha-info { display: flex; flex-direction: column; min-height: 0; padding: clamp(28px, 4vw, 52px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #9da596 transparent; }
.ficha-info::-webkit-scrollbar, .ficha[open]::-webkit-scrollbar { width: 8px; }
.ficha-info::-webkit-scrollbar-thumb, .ficha[open]::-webkit-scrollbar-thumb { border-radius: 8px; background: #9da596; }
.ficha-cat { display: flex; align-items: center; gap: 9px; margin: 0; color: #697066; font-size: 11px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.ficha-cat i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ficha-info h2 { margin: 16px 0 0; padding-right: 36px; font-size: clamp(30px, 3.2vw, 46px); font-weight: 630; letter-spacing: -.065em; line-height: 1.02; }
.ficha-precio { margin: 14px 0 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 720; letter-spacing: -.05em; }
.ficha-precio.consultar { color: #697066; font-size: 20px; font-weight: 600; }
.ficha-desc { margin: 18px 0 0; color: #4c524c; font-size: 17px; line-height: 1.5; }
.ficha-desc:empty { display: none; }
.ficha-specs { display: grid; margin: 26px 0 0; border-top: 1px solid #d9dcd5; }
.ficha-specs:empty { display: none; }
.ficha-specs div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #d9dcd5; font-size: 14px; }
.ficha-specs dt { color: #697066; }
.ficha-specs dd { margin: 0; font-weight: 640; text-align: right; }
.ficha-whatsapp { justify-content: center; gap: 10px; margin-top: auto; }
.ficha-info .ficha-whatsapp { margin-top: 30px; }
.ficha-whatsapp img { width: 20px; height: 20px; }
.ficha-cerrar {
  position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; width: 42px; height: 42px; place-items: center;
  border: 1px solid #cfd4ca; border-radius: 50%; background: rgba(246, 246, 242, .95); color: var(--ink); cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.ficha-cerrar:hover { border-color: var(--ink); transform: rotate(90deg); }

/* ── Foto ampliada ── */
.zoom { width: 100vw; max-width: none; height: 100svh; max-height: none; margin: 0; padding: 0; border: 0; background: #0d0e0d; }
.zoom::backdrop { background: #0d0e0d; }
.zoom-lienzo { width: 100%; height: 100%; overflow: auto; cursor: zoom-out; }
.zoom-lienzo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.zoom-cerrar { position: fixed; background: rgba(255, 255, 255, .92); }

/* ── Sección de la portada ── */
.catalog-home { background: var(--paper); }
.catalog-home-head { display: grid; grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr); gap: 20px 30px; align-items: start; }
.catalog-home-head .section-label { align-self: start; margin-top: 14px; }
.catalog-home-head h2 { margin: 0; font-size: clamp(44px, 5.55vw, 82px); font-weight: 630; letter-spacing: -.075em; line-height: 1.01; }
.catalog-home-head p:not(.section-label) { max-width: 520px; margin: 18px 0 0; color: #596058; font-size: 19px; line-height: 1.5; }
.catalog-home .cat-category-grid { margin-top: clamp(40px, 5vw, 64px); }
.catalog-home .cat-categories-label { margin-top: clamp(40px, 5vw, 64px); }
.catalog-home .cat-category-grid { margin-top: 0; }
.catalog-home .cat-grid { margin-top: 30px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.catalog-home-more { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.catalog-home-more button { cursor: pointer; border: 0; }
.catalog-home .cat-tools { margin-top: clamp(50px, 7vw, 90px); }
.catalog-home .cat-results { padding-bottom: 0; }
.p-card-link { text-decoration: none; }

@media (max-width: 1100px) {
  .catalog-home .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-home .cat-grid > li:nth-child(n + 7) { display: none; }
}

@media (max-width: 760px) {
  .cat-hero { display: block; padding-top: 40px; }
  .cat-hero h1 { margin-top: 24px; font-size: clamp(41px, 11vw, 60px); }
  .cat-lead { font-size: 17px; }
  .cat-tools { top: 70px; padding-block: 12px 10px; }
  .cat-close:not([hidden]) {
    display: inline-flex; align-items: center; gap: 5px; min-height: 38px; margin: 0 0 8px; padding: 0 6px 0 0;
    border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  }
  .cat-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .cat-tools-row { gap: 8px; }
  .cat-search { max-width: none; min-height: 44px; padding: 0 12px; }
  .cat-sort span { display: none; }
  .cat-sort { flex: none; }
  .cat-sort select { min-height: 44px; width: 118px; padding-inline: 10px 24px; font-size: 13px; }
  .cat-category-grid { gap: 10px; }
  .cat-category-card { min-height: 112px; padding: 16px 12px; gap: 10px; border-radius: 17px; }
  .cat-category-logo { width: 48px; height: 48px; border-radius: 14px; }
  .cat-category-logo img { width: 30px; height: 30px; }
  .cat-category-name { font-size: 14px; }
  .cat-category-arrow { top: 9px; right: 10px; font-size: 17px; }
  .cat-category-all { min-height: 54px; font-size: 14px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .p-card-badge { top: 6px; left: 6px; padding: 4px 7px; font-size: 8px; }
  .p-card-robotica { right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 5px 7px; font-size: 8px; }
  .p-card-nombre { font-size: 15px; }

  .ficha {
    width: 100vw; height: 92svh; max-height: 92svh; margin: auto 0 0; border-radius: 20px 20px 0 0;
  }
  .ficha[open] { display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9da596 transparent; animation: ficha-subir .38s cubic-bezier(.2, .8, .2, 1); }
  .ficha > .ficha-cerrar { position: sticky; top: 14px; right: auto; margin: 14px 14px -56px auto; }
  @keyframes ficha-subir { from { transform: translateY(40%); opacity: .4; } }
  .ficha-media { height: min(48svh, 100vw); }
  .ficha-media img { max-height: none; }
  .ficha-info { overflow: visible; padding: 24px 22px calc(26px + env(safe-area-inset-bottom)); }
  .ficha-info h2 { padding-right: 0; }
  .ficha-whatsapp { position: sticky; bottom: 0; }

  .catalog-home-head { display: block; }
  .catalog-home-head h2 { margin-top: 29px; font-size: clamp(41px, 8.7vw, 60px); }
  .catalog-home-head p:not(.section-label) { font-size: 17px; }
  .catalog-home .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-home .cat-grid > li:nth-child(n + 5) { display: none; }
  .catalog-home-more .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-grid > li, .ficha[open], .p-esqueleto span { animation: none; }
}