.catalog-hero{background:var(--navy-deep);color:#fff;border-bottom:1px solid #4cd96433;padding:140px 0 80px;position:relative;overflow:hidden}.catalog-hero-video-wrap{z-index:0;position:absolute;inset:0}.catalog-hero-video{object-fit:cover;opacity:.45;width:100%;height:100%}.catalog-hero-overlay{background:linear-gradient(135deg,#0a0f2ed9 0%,#1b256199 50%,#0a0f2ebf 100%);position:absolute;inset:0}.catalog-hero-grid{pointer-events:none;background-image:linear-gradient(#4cd9640d 1px,#0000 1px),linear-gradient(90deg,#4cd9640d 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.catalog-hero .eyebrow{color:var(--green-bright);margin-bottom:12px;display:block}.catalog-hero h1{max-width:700px;margin-bottom:16px}.catalog-hero h1 em{color:var(--acid);font-style:italic}.catalog-hero p{color:#ffffffa6;max-width:560px;font-size:16px}.catalog-layout{grid-template-columns:220px 1fr;gap:0;min-height:80vh;display:grid}.catalog-sidebar{background:var(--bone);border-right:1px solid var(--gray-300);height:calc(100dvh - 64px);padding:40px 24px;position:sticky;top:64px;overflow-y:auto}.filter-group{margin-bottom:32px}.filter-label{font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;color:var(--gray-500);margin-bottom:12px;font-size:10px;display:block}.filter-btn{cursor:pointer;border-radius:var(--radius-sm);width:100%;font-family:var(--font-sans);color:var(--gray-700);text-align:left;transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);background:0 0;border:none;align-items:center;gap:8px;margin-bottom:2px;padding:9px 12px;font-size:13px;display:flex}.filter-btn:hover{color:var(--ink);background:#0000000f}.filter-btn.active{background:var(--navy);color:#fff;font-weight:500}.filter-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.filter-count{font-family:var(--font-mono);color:inherit;opacity:.6;margin-left:auto;font-size:10px}.filter-btn.active .filter-count{opacity:.8}.dot-aminoacido{background:var(--green-bright)}.dot-mineral{background:var(--hot)}.dot-proteina{background:var(--acid)}.dot-texturizante{background:var(--gray-500)}.dot-otros{background:var(--navy)}.catalog-main{padding:40px}.catalog-legend{border-bottom:1px solid var(--bone);flex-wrap:wrap;gap:20px;margin-bottom:32px;padding-bottom:20px;display:flex}.legend-item{letter-spacing:1px;text-transform:uppercase;font-size:11px;font-family:var(--font-mono);color:var(--gray-700);align-items:center;gap:6px;display:flex}.legend-swatch{border-radius:2px;width:10px;height:10px}.periodic-table{grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:40px;display:grid}.pt-cell{aspect-ratio:1;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--gray-300);background:#fff;flex-direction:column;justify-content:space-between;padding:10px 8px;text-decoration:none;transition:transform .15s cubic-bezier(.23,1,.32,1),box-shadow .15s ease-out,opacity .15s ease-out;display:flex;position:relative}.pt-cell[data-cat=aminoacido]{border-color:#4cd9648c}.pt-cell[data-cat=mineral]{border-color:#ff4d2e8c}.pt-cell[data-cat=proteina]{background:#daff0008;border-color:#daff00a6}.pt-cell[data-cat=texturizante]{border-color:var(--gray-300)}.pt-cell[data-cat=otros]{border-color:#1b256159}.pt-cell:hover{z-index:10;transform:scale(1.05);box-shadow:0 8px 28px #1b256129}.pt-cell[data-cat=aminoacido]:hover{background:var(--green-bright);border-color:var(--green-bright)}.pt-cell[data-cat=mineral]:hover{background:var(--hot);border-color:var(--hot)}.pt-cell[data-cat=proteina]:hover{background:var(--acid);border-color:var(--acid)}.pt-cell[data-cat=texturizante]:hover{background:var(--gray-300);border-color:var(--gray-300)}.pt-cell[data-cat=otros]:hover{background:var(--navy);border-color:var(--navy)}.pt-cell.dimmed{opacity:.18;pointer-events:none;transform:none}.pt-num{font-family:var(--font-mono);color:var(--gray-500);font-size:9px;line-height:1}.pt-symbol{font-family:var(--font-serif);color:var(--navy);font-size:clamp(14px,2vw,22px);line-height:1}.pt-name{letter-spacing:.3px;text-transform:uppercase;color:var(--gray-500);font-size:8px;line-height:1.2}.pt-cell:hover .pt-num,.pt-cell:hover .pt-name{color:#0000008c}.pt-cell:hover .pt-symbol{color:var(--ink)}.pt-cell[data-cat=otros]:hover .pt-num,.pt-cell[data-cat=otros]:hover .pt-name{color:#ffffffa6}.pt-cell[data-cat=otros]:hover .pt-symbol{color:#fff}.pt-cell.in-cart:after{content:"✓";color:var(--green);font-size:9px;font-weight:700;font-family:var(--font-mono);position:absolute;top:5px;right:7px}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;opacity:0;pointer-events:none;background:#0a0f2eb3;justify-content:center;align-items:center;padding:24px;transition:opacity .18s ease-out;display:flex;position:fixed;inset:0}.modal-backdrop.open{opacity:1;pointer-events:all}.modal{border-radius:var(--radius-md);background:#fff;width:100%;max-width:680px;max-height:90vh;transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s ease-out;overflow-y:auto;transform:translateY(16px)scale(.98);box-shadow:0 24px 80px #0a0f2e73}.modal-backdrop.open .modal{transform:translateY(0)scale(1)}.modal-header{border-bottom:1px solid var(--bone);grid-template-columns:auto 1fr auto;align-items:start;gap:20px;padding:32px 32px 24px;display:grid}.modal-symbol-wrap{border-radius:var(--radius-sm);flex-direction:column;flex-shrink:0;justify-content:space-between;width:72px;height:72px;padding:8px;display:flex}.modal-symbol-wrap[data-cat=aminoacido]{background:#4cd9641f;border:1px solid #4cd96466}.modal-symbol-wrap[data-cat=mineral]{background:#ff4d2e1a;border:1px solid #ff4d2e66}.modal-symbol-wrap[data-cat=proteina]{background:#daff001a;border:1px solid #daff0080}.modal-symbol-wrap[data-cat=texturizante]{background:var(--bone);border:1px solid var(--gray-300)}.modal-symbol-wrap[data-cat=otros]{background:#1b256114;border:1px solid #1b25614d}.modal-num{font-family:var(--font-mono);color:var(--gray-500);font-size:10px}.modal-symbol{font-family:var(--font-serif);color:var(--navy);font-size:26px;line-height:1}.modal-title-block{padding-top:4px}.modal-cat-badge{font-family:var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;border-radius:100px;margin-bottom:8px;padding:3px 8px;font-size:9px;display:inline-block}.badge-aminoacido{color:var(--green);background:#4cd96426}.badge-mineral{color:var(--hot);background:#ff4d2e1f}.badge-proteina{color:#7a7a00;background:#daff0033}.badge-texturizante{background:var(--bone);color:var(--gray-700)}.badge-otros{color:var(--navy);background:#1b25611a}.modal-name{font-family:var(--font-serif);color:var(--navy);margin-bottom:6px;font-size:24px;line-height:1.1}.modal-formula{font-family:var(--font-mono);color:var(--green);letter-spacing:.5px;font-size:12px}.modal-close{color:var(--gray-500);cursor:pointer;transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:4px 8px;font-size:22px;line-height:1}.modal-close:hover{background:var(--bone);color:var(--ink)}.modal-body{flex-direction:column;gap:20px;padding:24px 32px;display:flex}.modal-desc{color:var(--gray-700);font-size:14px;line-height:1.7}.modal-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}.modal-field label{font-family:var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-500);margin-bottom:6px;font-size:10px;display:block}.modal-field p{color:var(--ink);font-size:13px;line-height:1.5}.species-badges{flex-wrap:wrap;gap:6px;display:flex}.species-badge{font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase;border-radius:100px;padding:4px 10px;font-size:10px}.species-badge.perro{color:var(--navy);background:#1b25611a}.species-badge.gato{color:var(--green);background:#2e7d321a}.modal-actions{border-top:1px solid var(--bone);flex-wrap:wrap;gap:12px;padding:20px 32px 28px;display:flex}.btn-add-cart{background:var(--green);color:#fff;border:2px solid var(--green);border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-sans);cursor:pointer;transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);flex:1;min-width:160px;padding:12px 20px}.btn-add-cart:hover{background:var(--green-bright);border-color:var(--green-bright);color:var(--ink)}.btn-add-cart.added{background:var(--navy);border-color:var(--navy)}.btn-pdf{color:var(--navy);border:2px solid var(--navy);border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-sans);cursor:pointer;transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);background:0 0;align-items:center;gap:6px;padding:12px 20px;text-decoration:none;display:inline-flex}.btn-pdf:hover{background:var(--navy);color:#fff}.toast{background:var(--navy);color:#fff;border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-sans);border-left:3px solid var(--green-bright);z-index:300;opacity:0;max-width:320px;padding:14px 20px;transition:transform .24s cubic-bezier(.23,1,.32,1),opacity .2s ease-out;position:fixed;bottom:32px;right:32px;transform:translateY(80px)}.toast.show{opacity:1;transform:translateY(0)}@media (width<=1100px){.periodic-table{grid-template-columns:repeat(6,1fr)}}@media (width<=900px){.catalog-layout{grid-template-columns:1fr}.catalog-sidebar{flex-wrap:wrap;gap:24px;height:auto;padding:24px;display:flex;position:static;overflow-x:auto}.filter-group{min-width:140px;margin-bottom:0}.periodic-table{grid-template-columns:repeat(5,1fr)}.catalog-main{padding:24px}}@media (width<=600px){.periodic-table{grid-template-columns:repeat(4,1fr);gap:5px}.modal-header{grid-template-columns:auto 1fr auto;gap:12px;padding:20px}.modal-body{padding:16px 20px}.modal-actions{padding:16px 20px 20px}.modal-row{grid-template-columns:1fr}.catalog-hero{padding:120px 0 60px}}