/* Catálogo integrado. Todo va bajo body.cat para no chocar con site.css:
   varias clases se llaman igual en los dos (hero, tarjeta, paso, cifra, fab). */

.cat{--ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7FAFC;
  --ink:#0B2434; --ink-2:#42606F; --ink-3:#7793A3;
  --line:#DDE6EC; --line-2:#C8D8E2;
  --marino:#0F3A54; --cian:#1F9FD8; --turquesa:#2EB3CC;
  --placa:#A7CFE2; --placa-2:#BFDCEA;
  --verde:#15764F; --wa:#25D366;
  --on-marino:#EAF3F8; --on-marino-2:#9DBCCE;
  --sombra:0 1px 2px rgba(11,36,52,.06), 0 8px 24px -12px rgba(11,36,52,.18);
  --solido:#0F3A54; --sobre-solido:#EAF3F8; --pie-bg:#0F3A54; --borde-muestra:rgba(11,36,52,.22);
  --sombra-alta:0 2px 4px rgba(11,36,52,.08), 0 22px 48px -18px rgba(11,36,52,.34);
  --anillo:#1F9FD8;}
.cat h1,.cat h2,.cat h3{font-family:Archivo,system-ui,sans-serif; text-wrap:balance; margin:0; line-height:1.05}
.cat .wa{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  background:var(--wa); color:#06301A; font-weight:600; font-size:.938rem;
  padding:.7rem 1.15rem; border-radius:999px; border:0; cursor:pointer;
  box-shadow:0 2px 10px -2px rgba(37,211,102,.5);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;}
.cat .wa:hover{transform:translateY(-2px); box-shadow:0 8px 22px -4px rgba(37,211,102,.55)}
.cat .wa svg{width:19px; height:19px; flex:none}
.cat .wa-lg{font-size:1.063rem; padding:.95rem 1.6rem}
.cat .hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); overflow:hidden}
.cat .hero-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4rem); align-items:center}
.cat .hero h1{font-size:clamp(2.4rem,6.2vw,4.15rem); font-weight:800; letter-spacing:-.025em;
  margin:1.1rem 0 0; max-width:14ch;}
.cat .hero h1 em{font-style:normal; color:var(--cian)}
.cat .hero-lead{margin-top:1.15rem; font-size:1.063rem; color:var(--ink-2); max-width:46ch}
.cat .cifras{display:flex; gap:2.25rem; margin-top:2rem; flex-wrap:wrap}
.cat .cifra b{display:block; font-family:Archivo,sans-serif; font-size:1.85rem; font-weight:700; letter-spacing:-.02em}
.cat .cifra span{font-family:"IBM Plex Mono",monospace; font-size:.688rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.cat .hero-cta{display:flex; gap:.75rem; align-items:center; margin-top:2.25rem; flex-wrap:wrap}
.cat .hero-nota{font-size:.875rem; color:var(--verde); font-weight:600}
.cat .cluster{position:relative; height:clamp(300px,38vw,440px)}
.cat .cluster figure{position:absolute; margin:0; border-radius:16px; overflow:hidden;
  background:var(--placa); box-shadow:var(--sombra-alta);}
.cat .cluster img{width:100%; height:100%; object-fit:cover}
.cat .cl-a{width:47%; aspect-ratio:3/4; left:2%;  top:6%}
.cat .cl-b{width:44%; aspect-ratio:3/4; left:36%; top:26%; z-index:2}
.cat .cl-c{width:38%; aspect-ratio:3/4; right:0;  top:0}
.cat .pestanas{display:flex; gap:.5rem; border-bottom:1px solid var(--line); margin-top:.5rem}
.cat .pest{background:none; border:0; border-bottom:3px solid transparent; cursor:pointer;
  padding:.85rem 1.1rem; font-size:1rem; font-weight:600; color:var(--ink-3);
  display:flex; align-items:center; gap:.5rem; transition:color .18s, border-color .18s;}
.cat .pest:hover{color:var(--ink-2)}
.cat .pest[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--cian)}
.cat .pest span{font-family:"IBM Plex Mono",monospace; font-size:.688rem; background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:.1rem .45rem; color:var(--ink-3);}
.cat .pest[aria-selected="true"] span{background:var(--cian); border-color:var(--cian); color:#fff}
.cat .uso-rapido{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; padding:1.3rem 0 1.5rem}
.cat .uso-rotulo{flex:none}
.cat .uso-chips{display:flex; gap:.55rem; flex-wrap:wrap}
.cat .uso-chip{display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-2); border-radius:999px;
  padding:.55rem 1.05rem; font-family:Archivo,sans-serif; font-size:.875rem; font-weight:600;
  color:var(--ink-2); box-shadow:var(--sombra); transition:transform .15s, border-color .15s, color .15s, background .15s;}
.cat .uso-chip:hover{border-color:var(--cian); color:var(--ink); transform:translateY(-1px)}
.cat .uso-chip[aria-pressed="true"]{background:var(--solido); border-color:var(--solido); color:var(--sobre-solido)}
.cat .uso-chip .n{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.688rem;
  opacity:.7; margin-left:.1rem;}
.cat .desde{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px;
  padding:.7rem 1rem; margin-bottom:1rem; font-size:.875rem; color:var(--ink-2);}
.cat .desde b{color:var(--ink)}
.cat .desde button{margin-left:auto; background:none; border:0; color:var(--cian); cursor:pointer;
  font-size:.813rem; text-decoration:underline; text-underline-offset:3px;}
.cat .cat-nav{display:flex; align-items:center; gap:.75rem; margin:1.5rem 0 .5rem}
.cat .cat-nav #catBack{display:inline-flex; align-items:center; gap:.3rem; background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:999px; padding:.45rem .9rem .45rem .7rem;
  font-size:.875rem; font-weight:600; color:var(--ink-2); cursor:pointer; transition:border-color .18s, color .18s;}
.cat .cat-nav #catBack:hover{border-color:var(--cian); color:var(--ink)}
.cat .cat-nav #catTitulo{font-size:.938rem; color:var(--ink-3)}
.cat .cat-nav #catTitulo b{color:var(--ink); font-weight:600}
.cat .rejilla-cat .foto{background:var(--placa-2)}
.cat .rejilla-cat .t-nombre{font-size:1.188rem}
.cat .rejilla-cat .t-flecha{color:var(--cian); font-weight:600}
.cat .btn-carro{position:relative}
.cat .carro-n{position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 .28rem;
  background:var(--cian); color:#fff; border-radius:999px; display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:.688rem; font-weight:600;}
.cat .carro-velo{position:fixed; inset:0; z-index:60; background:rgba(6,26,38,.55);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;}
.cat .carro-velo[data-abierto]{opacity:1; visibility:visible}
.cat .carro{position:absolute; top:0; right:0; height:100%; width:min(420px,100%);
  background:var(--surface); border-left:1px solid var(--line);
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.7,.3,1);}
.cat .carro-velo[data-abierto] .carro{transform:none}
.cat .carro-top{display:flex; align-items:center; gap:.75rem; padding:1.15rem 1.25rem; border-bottom:1px solid var(--line)}
.cat .carro-top h2{font-size:1.25rem; font-weight:700}
.cat .carro-top button{margin-left:auto; background:none; border:0; cursor:pointer; color:var(--ink-2); display:grid; place-items:center; padding:.3rem}
.cat .carro-lista{flex:1; overflow-y:auto; padding:1rem 1.25rem; display:grid; gap:.85rem; align-content:start}
.cat .carro-vacio{color:var(--ink-3); font-size:.938rem; text-align:center; padding:3rem 1rem}
.cat .linea{display:grid; grid-template-columns:56px 1fr; gap:.8rem; align-items:start}
.cat .linea img{width:56px; height:75px; object-fit:cover; border-radius:8px; background:var(--placa)}
.cat .linea-n{font-weight:600; font-size:.938rem; line-height:1.25}
.cat .linea-d{font-size:.75rem; color:var(--ink-3); margin-top:.15rem}
.cat .linea-p{display:flex; align-items:center; gap:.5rem; margin-top:.5rem}
.cat .paso{display:flex; align-items:center; border:1px solid var(--line-2); border-radius:999px; overflow:hidden}
.cat .paso button{width:28px; height:28px; background:var(--surface-2); border:0; cursor:pointer; color:var(--ink-2); font-size:1rem; line-height:1}
.cat .paso button:hover{background:var(--line)}
.cat .paso input{width:64px; border:0; text-align:center; background:none; color:var(--ink);
  font-family:"IBM Plex Mono",monospace; font-size:.875rem; padding:.25rem 0;}
.cat .paso input::-webkit-outer-spin-button,.cat .paso input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cat .paso input[type=number]{-moz-appearance:textfield}
.cat .quitar{background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:.75rem; text-decoration:underline; text-underline-offset:2px}
.cat .quitar:hover{color:#D22C2C}
.cat .carro-pie{border-top:1px solid var(--line); padding:1.15rem 1.25rem; display:grid; gap:.75rem}
.cat .carro-tot{display:flex; justify-content:space-between; font-size:.875rem; color:var(--ink-2)}
.cat .carro-tot b{color:var(--ink); font-family:"IBM Plex Mono",monospace}
.cat .carro-nota{font-size:.75rem; color:var(--ink-3); text-align:center}
.cat .agregar{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:.35rem}
.cat .agregar .paso input{width:76px}
.cat .btn-add{flex:1; min-width:150px; background:var(--solido); color:var(--sobre-solido); border:0;
  border-radius:999px; padding:.75rem 1.2rem; font-size:.938rem; font-weight:600; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), opacity .18s;}
.cat .btn-add:hover{transform:translateY(-2px)}
.cat .btn-add[data-hecho]{background:var(--verde); color:#fff; font-size:.875rem}
.cat .compartir{display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  margin-top:.1rem; background:none; border:1px solid var(--line-2); border-radius:999px;
  padding:.6rem 1rem; font-size:.875rem; color:var(--ink-2); cursor:pointer;
  transition:border-color .18s, color .18s;}
.cat .compartir:hover{border-color:var(--cian); color:var(--ink)}
.cat .compartir svg{width:16px; height:16px; flex:none}
.cat .aviso-cant{font-size:.75rem; color:#D22C2C; width:100%}
.cat .tapas li.enlace{cursor:pointer; color:var(--cian); text-decoration:underline; text-underline-offset:3px}
.cat .tapas li.enlace:hover{color:var(--ink)}
.cat .incluye{display:inline-block; background:var(--turquesa); color:#04222E; font-size:.688rem;
  font-weight:700; letter-spacing:.06em; padding:.22rem .6rem; border-radius:999px; margin-left:.6rem;
  vertical-align:middle;}
.cat .filtros{position:sticky; top:var(--alto-cabecera,64px); z-index:30; background:var(--ground); border-block:1px solid var(--line); padding:.9rem 0}
.cat .f-fila{display:flex; gap:.75rem; align-items:center; flex-wrap:wrap}
.cat .buscar{position:relative; flex:1 1 260px; max-width:340px}
.cat .buscar svg{position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3)}
.cat .buscar input{width:100%; font:inherit; font-size:.938rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:999px;
  padding:.6rem 1rem .6rem 2.5rem;}
.cat .buscar input::placeholder{color:var(--ink-3)}
.cat .grupo{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap}
.cat .grupo > .rotulo{margin-right:.15rem}
.cat .chip{background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2);
  border-radius:999px; padding:.4rem .8rem; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:.75rem; font-weight:500;
  transition:background .15s, color .15s, border-color .15s;}
.cat .chip:hover{border-color:var(--cian); color:var(--ink)}
.cat .chip[aria-pressed="true"]{background:var(--solido); border-color:var(--solido); color:var(--sobre-solido)}
.cat .limpiar{background:none; border:0; color:var(--cian); font-size:.813rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:.4rem}
.cat .conteo{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--ink-3); white-space:nowrap}
.cat .f-toggle{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2);
  border-radius:999px; padding:.6rem 1rem; font-size:.875rem; font-weight:500;}
.cat .f-toggle .sliders{width:16px; height:16px; flex:none}
.cat .f-toggle .chevron{width:14px; height:14px; flex:none; transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.cat .f-toggle[aria-expanded="true"]{border-color:var(--cian); color:var(--ink)}
.cat .f-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.cat .f-badge{background:var(--solido); color:var(--sobre-solido); border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:.688rem; font-weight:600;
  min-width:19px; height:19px; display:grid; place-items:center; padding:0 .3rem;}
.cat .f-panel{overflow:hidden; max-height:0}
.cat .f-panel[data-abierto]{max-height:none}
.cat .f-panel-in{min-height:0; opacity:0; transform:translateY(-6px);
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.7,.3,1);}
.cat .f-panel[data-abierto] .f-panel-in{opacity:1; transform:none}
.cat .f-panel-pad{display:flex; gap:.75rem 1.1rem; align-items:center; flex-wrap:wrap; padding-top:.85rem}
.cat .rejilla{display:grid; gap:1.1rem; padding:clamp(1.6rem,3vw,2.5rem) 0 4rem;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.cat .tarjeta{display:flex; flex-direction:column; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; padding:0; box-shadow:var(--sombra);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;}
.cat .tarjeta:hover{transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--line-2)}
.cat .foto{position:relative; aspect-ratio:3/4; background:var(--placa); overflow:hidden}
.cat .foto img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cat .tarjeta:hover .foto img{transform:scale(1.045)}
.cat .cap{position:absolute; left:.6rem; bottom:.6rem;
  background:var(--solido); color:var(--sobre-solido);
  font-family:"IBM Plex Mono",monospace; font-size:.75rem; font-weight:600;
  padding:.28rem .6rem; border-radius:999px; letter-spacing:.01em;}
.cat .t-cuerpo{padding:.85rem .9rem 1rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.cat .t-nombre{font-family:Archivo,sans-serif; font-size:1.063rem; font-weight:700; letter-spacing:-.012em; line-height:1.2}
.cat .t-uso{font-size:.813rem; color:var(--ink-2); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.cat .t-pie{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:.6rem; border-top:1px solid var(--line)}
.cat .t-rosca{font-family:"IBM Plex Mono",monospace; font-size:.719rem; color:var(--ink-3); letter-spacing:.02em}
.cat .puntos{display:flex; gap:3px}
.cat .punto{width:11px; height:11px; border-radius:50%; border:1px solid var(--borde-muestra)}
.cat .vacio{padding:4rem 0; text-align:center; color:var(--ink-2)}
.cat .vacio b{display:block; font-family:Archivo,sans-serif; font-size:1.25rem; color:var(--ink); margin-bottom:.4rem}
.cat .velo{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:1.25rem;
  background:rgba(6,26,38,.62); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .25s;}
.cat .velo[data-abierto]{opacity:1; pointer-events:auto}
.cat .ficha{position:relative; width:min(900px,100%); max-height:calc(100dvh - 2.5rem); overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--sombra-alta);
  transform:scale(.965) translateY(10px); opacity:0; transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .25s;}
.cat .velo[data-abierto] .ficha{transform:none; opacity:1}
.cat .f-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
.cat .f-foto{background:var(--placa); aspect-ratio:3/4}
.cat .f-foto img{width:100%; height:100%; object-fit:cover}
.cat .f-info{padding:clamp(1.4rem,3vw,2.1rem); display:flex; flex-direction:column; gap:1.15rem}
.cat .f-info h2{font-size:clamp(1.8rem,3.4vw,2.4rem); font-weight:800; letter-spacing:-.025em}
.cat .f-cap{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap}
.cat .f-cap b{font-family:"IBM Plex Mono",monospace; font-size:1.25rem; font-weight:600;
  background:var(--solido); color:var(--sobre-solido); padding:.4rem .95rem; border-radius:999px;}
.cat .f-cap span{font-size:.938rem; color:var(--ink-2)}
.cat .specs{border-top:1px solid var(--line)}
.cat .spec{display:flex; justify-content:space-between; gap:1.25rem; padding:.72rem 0; border-bottom:1px solid var(--line)}
.cat .spec dt{font-size:.875rem; font-weight:600; color:var(--ink); flex:none}
.cat .spec dd{margin:0; font-family:"IBM Plex Mono",monospace; font-size:.875rem; color:var(--ink-2); text-align:right}
.cat .f-nota{font-size:.875rem; font-weight:600; color:var(--verde)}
.cat .bloque > .rotulo{display:block; margin-bottom:.55rem}
.cat .colores{display:flex; gap:.55rem; flex-wrap:wrap}
.cat .color{display:flex; align-items:center; gap:.4rem; font-size:.813rem; color:var(--ink-2)}
.cat .color i{width:15px; height:15px; border-radius:50%; border:1px solid var(--borde-muestra); display:block}
.cat .colores.viva{gap:.45rem}
.cat .tono{display:flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:.3rem .65rem .3rem .35rem; font-size:.813rem; color:var(--ink-2);
  transition:border-color .18s, color .18s, background .18s;}
.cat .tono i{width:16px; height:16px; border-radius:50%; border:1px solid var(--borde-muestra); display:block; flex:none}
.cat .tono:hover{border-color:var(--cian); color:var(--ink)}
.cat .tono[aria-pressed="true"]{border-color:var(--cian); color:var(--ink); background:var(--surface); box-shadow:0 0 0 2px color-mix(in srgb, var(--cian) 28%, transparent)}
.cat .tono[data-pendiente]{opacity:.55}
.cat .tono[data-pendiente] em{font-style:normal; font-size:.688rem; color:var(--ink-3)}
.cat .f-foto{position:relative}
.cat .f-foto img{transition:opacity .22s ease}
.cat .f-foto img[data-cambiando]{opacity:0}
.cat .f-cont{position:absolute; right:.7rem; bottom:.7rem; pointer-events:none;
  background:rgba(6,26,38,.72); color:#EAF3F8; backdrop-filter:blur(4px);
  font-family:"IBM Plex Mono",monospace; font-size:.719rem; font-weight:500;
  padding:.25rem .6rem; border-radius:999px; letter-spacing:.02em;}
.cat .f-flecha{position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(6,26,38,.55); color:#EAF3F8; border:0; cursor:pointer;
  backdrop-filter:blur(4px); padding:0;
  transition:background .18s, transform .18s cubic-bezier(.2,.7,.3,1);}
.cat .f-flecha:hover{background:rgba(6,26,38,.85); transform:translateY(-50%) scale(1.08)}
.cat .f-flecha:active{transform:translateY(-50%) scale(.95)}
.cat .f-flecha svg{width:19px; height:19px}
.cat .f-ant{left:.6rem}
.cat .f-sig{right:.6rem}
.cat .pista{font-size:.688rem; color:var(--ink-3); text-transform:none; letter-spacing:0; font-family:"IBM Plex Sans",sans-serif}
.cat .tapas{margin:0; padding:0; list-style:none; display:grid; gap:.3rem}
.cat .tapas li{font-size:.875rem; color:var(--ink-2); padding-left:1rem; position:relative}
.cat .tapas li::before{content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--turquesa)}
.cat .cerrar{position:absolute; top:.85rem; right:.85rem; z-index:2; width:36px; height:36px;
  display:grid; place-items:center; cursor:pointer; border-radius:50%;
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--sombra);}
.cat .f-nav{display:flex; gap:.5rem; align-items:center; padding:0 clamp(1.4rem,3vw,2.1rem) clamp(1.4rem,3vw,2.1rem)}
.cat .f-nav button{background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px;
  padding:.5rem .95rem; cursor:pointer; font-size:.813rem; color:var(--ink-2);}
.cat .f-nav button:hover{border-color:var(--cian); color:var(--ink)}
.cat .f-nav .idx{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--ink-3)}
.cat .respaldo{position:relative; width:min(440px,100%); background:var(--surface);
  border:1px solid var(--line); border-radius:18px; padding:1.6rem;
  box-shadow:var(--sombra-alta); display:grid; gap:1rem;
  transform:scale(.965) translateY(10px); opacity:0;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .25s;}
.cat .velo[data-abierto] .respaldo{transform:none; opacity:1}
.cat .respaldo h2{font-size:1.5rem; font-weight:700; letter-spacing:-.02em; padding-right:2.5rem}
.cat .r-nota{font-size:.875rem; color:var(--ink-2)}
.cat .r-campo{display:grid; gap:.4rem}
.cat .r-fila{display:flex; align-items:center; gap:.75rem; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:.7rem .85rem}
.cat .r-num{font-family:"IBM Plex Mono",monospace; font-size:1.125rem; font-weight:600; flex:1; user-select:all}
.cat .r-msg{font-size:.813rem; color:var(--ink-2); flex:1; user-select:all; max-height:5.2em; overflow:auto}
.cat .r-copia{background:var(--solido); color:var(--sobre-solido); border:0; border-radius:999px; padding:.4rem .8rem; font-size:.75rem; font-weight:600; cursor:pointer; flex:none}
.cat .r-link{font-size:.875rem; color:var(--cian); text-align:center; text-underline-offset:3px}
.cat .fab{position:fixed; right:1.25rem; bottom:1.25rem; z-index:50;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--wa); color:#06301A; box-shadow:0 6px 22px -4px rgba(37,211,102,.6);
  text-decoration:none; transform:scale(0); transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.cat .fab[data-visible]{transform:scale(1)}
.cat .fab:hover{transform:scale(1.08)}
@keyframes waEspera{0%,100%{opacity:1}50%{opacity:.45}}
.cat .wa-espera{animation:waEspera .5s ease}
.cat .fab svg{width:26px; height:26px}
.cat .rev{opacity:0; transform:translateY(18px)}
.cat .rev.in{opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
.cat .hero .rev{transform:translateY(22px)}
.cat .cluster figure{opacity:0; transform:translateY(26px) scale(.97)}
.cat .cluster.in figure{opacity:1; transform:none; transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
.cat .cluster.in .cl-a{transition-delay:.1s}
.cat .cluster.in .cl-b{transition-delay:.22s}
.cat .cluster.in .cl-c{transition-delay:.34s}
@media (prefers-reduced-motion: reduce){
*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
.cat .rev,.cat .cluster figure{opacity:1 !important; transform:none !important}
.cat .tarjeta:hover{transform:none}
}
@media (max-width:900px){
.cat .hero-in{grid-template-columns:1fr}
.cat .cluster{order:-1; height:clamp(240px,58vw,330px)}
.cat .f-grid{grid-template-columns:1fr}
.cat .f-foto{aspect-ratio:3/4; width:min(72%, 290px);
    margin:1.5rem auto 0; border-radius:14px; overflow:hidden;}
.cat .f-info{padding-top:1.25rem}
}
@media (max-width:820px){
.cat .f-panel-pad{align-items:flex-start; flex-direction:column; gap:.7rem}
.cat .grupo{width:100%}
.cat .buscar{max-width:none}
}
@media (max-width:560px){
.cat .rejilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem}
.cat .filtros{padding:.7rem 0}
.cat .pest{white-space:nowrap; padding:.7rem .55rem; font-size:.9rem}
.cat .pest span{font-size:.625rem}
}
@media (max-width:380px){
.cat .pest{padding:.7rem .4rem; font-size:.85rem}
.cat .pestanas{gap:.25rem}
.cat .conteo{margin-left:0; width:100%; order:3}
.cat .buscar{flex:1 1 100%}
.cat .f-toggle{flex:none}
.cat .cifras{gap:1.5rem}
}

/* site.css le da a estas clases propiedades que el catálogo no redefine */
.cat .hero{background:none}
.cat .hero-in{max-width:none; padding:0}
.cat .hero h1{color:var(--ink)}
.cat .hero .rotulo{color:var(--ink-3)}
.cat .cifra{background:none; border:0; border-radius:0; padding:0}
.cat .cifra b{color:var(--ink)}
.cat .paso{flex-direction:row}

/* portada: una sola foto en lugar de las tres del catálogo original */
.cat .cluster.cluster-portada{height:auto; aspect-ratio:16/10}
.cat .cluster-portada .cl-portada{inset:0}
@media (min-width:901px){
  .cat .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .cat .cluster.cluster-portada{aspect-ratio:16/9}
  .cat .cluster-portada img{object-position:50% 80%}
}

/* pestañas y carrito dentro de la cabecera del sitio */
.cat .top .pestanas{margin-top:0; border-bottom:0}
.cat .top-in .btn-carro{margin-left:.35rem; padding:.55rem .95rem; font-size:.875rem; flex:none}
@media (max-width:860px){
  .cat .top-in .btn-carro{margin-left:.5rem}
}
@media (max-width:420px){
  .cat .btn-carro-txt{display:none}
  .cat .top-in .btn-carro{padding:.6rem}
}