*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --red: #e60023;
     --red-dark: #ad081b;
     --red-hover: #c00020;
     --bg: #f0eeee;
     --surface: #ffffff;
     --text: #111111;
     --muted: #767676;
     --border: #e2e2e2;
     --radius: 16px;
     --header-h: 60px;
     --sidebar-w: 220px;
     --font-body: 'DM Sans', sans-serif;
     --font-head: 'Fraunces', serif;
     --shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .06);
     --shadow-hover: 0 4px 16px rgba(0, 0, 0, .18), 0 16px 40px rgba(0, 0, 0, .1);
     --transition: .22s cubic-bezier(.4, 0, .2, 1);
 }

 body {
     font-family: var(--font-body);
     background: var(--bg);
     color: var(--text);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
 }

 header {
     position: sticky;
     top: 0;
     z-index: 100;
     background: var(--surface);
     box-shadow: 0 1px 0 var(--border);
     height: var(--header-h);
 }

 .contenedor {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 0 16px;
 }

 .marca {
     display: flex;
     align-items: center;
     gap: 6px;
     text-decoration: none;
     flex-shrink: 0;
 }

 .logo {
     width: 40px;
     height: 40px;
     background: var(--red);
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: #fff;
     font-family: var(--font-head);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: .5px;
 }

 .marca span {
     font-weight: 700;
     font-size: 18px;
     color: var(--text);
 }

 .buscador {
     flex: 1;
     max-width: 560px;
 }

 #buscadorinput {
     width: 100%;
     padding: 10px 18px;
     border-radius: 24px;
     border: none;
     background: var(--bg);
     font-family: var(--font-body);
     font-size: 15px;
     color: var(--text);
     outline: none;
     transition: box-shadow var(--transition);
 }

 #buscadorinput:focus {
     box-shadow: 0 0 0 3px rgba(230, 0, 35, .18);
     background: #fff;
 }

 #buscadorinput::placeholder {
     color: var(--muted);
 }

 .acci {
     display: flex;
     gap: 6px;
     flex-shrink: 0;
     margin-left: auto;
 }

 .boton {
     display: inline-flex;
     align-items: center;
     padding: 10px 18px;
     border-radius: 24px;
     text-decoration: none;
     font-family: var(--font-body);
     font-weight: 600;
     font-size: 14px;
     transition: background var(--transition);
     color: var(--text);
     background: var(--bg);
 }

 .boton:hover {
     background: var(--border);
 }

 .boton.primary {
     background: var(--red);
     color: #fff;
 }

 .boton.primary:hover {
     background: var(--red-hover);
 }

 .main {
     display: flex;
     width: 100%;
     padding: 16px 12px;
     gap: 0;
     flex: 1;
 }

 .lado {
     width: var(--sidebar-w);
     flex-shrink: 0;
     padding: 8px 12px 8px 4px;
     position: sticky;
     top: calc(var(--header-h) + 8px);
     align-self: flex-start;
     height: fit-content;
 }

 .lado .label {
     font-family: var(--font-head);
     font-size: 16px;
     font-weight: 700;
     padding: 8px 12px 14px;
     color: var(--text);
 }

 .cate {
     display: flex;
     align-items: center;
     width: 100%;
     padding: 11px 16px;
     margin-bottom: 2px;
     border: none;
     background: none;
     border-radius: 12px;
     font-family: var(--font-body);
     font-size: 14px;
     font-weight: 500;
     color: var(--text);
     cursor: pointer;
     transition: background var(--transition), color var(--transition), transform var(--transition);
     text-align: left;
     gap: 10px;
 }

 .cate:hover {
     background: var(--border);
     transform: translateX(2px);
 }

 .cate.active {
     background: var(--red);
     color: #fff;
     font-weight: 600;
 }

 .cate .badge {
     margin-left: auto;
     background: rgba(0, 0, 0, .08);
     border-radius: 20px;
     padding: 1px 7px;
     font-size: 11px;
     font-weight: 600;
 }

 .cate.active .badge {
     background: rgba(255, 255, 255, .25);
 }

 /* "Ver todos" */
 #btn-todos {
     border-top: 1px solid var(--border);
     margin-top: 8px;
     padding-top: 8px;
 }

 .feed {
     flex: 1;
     min-width: 0;
     padding: 0 8px;
 }

 .feed-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 18px;
     padding: 4px 0;
 }

 .feed-header h2 {
     font-family: var(--font-head);
     font-size: 22px;
     font-weight: 700;
 }

 .muted {
     color: var(--muted);
     font-size: 14px;
 }

 .masonry {
     column-count: 5;
     column-gap: 12px;
 }

 @media (max-width: 1400px) {
     .masonry {
         column-count: 4;
     }
 }

 @media (max-width: 1100px) {
     .masonry {
         column-count: 3;
     }
 }

 @media (max-width: 800px) {
     .masonry {
         column-count: 2;
     }
 }

 @media (max-width: 500px) {
     .masonry {
         column-count: 1;
     }
 }

 .pin {
     break-inside: avoid;
     margin-bottom: 12px;
     border-radius: var(--radius);
     overflow: hidden;
     background: var(--surface);
     box-shadow: var(--shadow);
     cursor: pointer;
     position: relative;
     transition: box-shadow var(--transition), transform var(--transition);
 }

 .pin:hover {
     box-shadow: var(--shadow-hover);
     transform: scale(1.02);
 }

 .pin-img-wrap {
     position: relative;
     display: block;
     overflow: hidden;
 }

 .pin-img-wrap::after {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0);
     transition: background var(--transition);
     border-radius: var(--radius) var(--radius) 0 0;
 }

 .pin:hover .pin-img-wrap::after {
     background: rgba(0, 0, 0, .18);
 }

 .pin-save {
     position: absolute;
     top: 10px;
     right: 10px;
     background: var(--red);
     color: #fff;
     border: none;
     border-radius: 20px;
     padding: 8px 16px;
     font-family: var(--font-body);
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     opacity: 0;
     pointer-events: none;
     transform: translateY(-4px);
     transition: opacity var(--transition), transform var(--transition);
     z-index: 2;
 }

 .pin:hover .pin-save {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0);
 }

 .pin img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: var(--radius) var(--radius) 0 0;
     transition: transform var(--transition);
 }

 .pin:hover img {
     transform: scale(1.03);
 }

 /* Meta / footer del pin */
 .meta {
     padding: 10px 12px 12px;
 }

 .left {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     overflow: hidden;
     flex-shrink: 0;
     background: var(--border);
 }

 .avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
 }

 .title {
     font-size: 13px;
     font-weight: 500;
     color: var(--text);
     line-height: 1.3;
 }

 /* Chip de categoría en el pin */
 .pin-cat {
     position: absolute;
     top: 10px;
     left: 10px;
     background: rgba(255, 255, 255, .92);
     border-radius: 20px;
     padding: 3px 10px;
     font-size: 11px;
     font-weight: 700;
     color: var(--text);
     backdrop-filter: blur(4px);
     z-index: 2;
     opacity: 0;
     transition: opacity var(--transition);
 }

 .pin:hover .pin-cat {
     opacity: 1;
 }

 /* Animación de entrada */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(16px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .pin {
     animation: fadeInUp .35s ease both;
 }

 .pin:nth-child(2) {
     animation-delay: .04s;
 }

 .pin:nth-child(3) {
     animation-delay: .08s;
 }

 .pin:nth-child(4) {
     animation-delay: .12s;
 }

 .pin:nth-child(5) {
     animation-delay: .16s;
 }

 .pin:nth-child(6) {
     animation-delay: .20s;
 }

 /* Pin oculto */
 .pin.hidden {
     display: none !important;
 }

 /* Empty state */
 .empty-state {
     display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 80px 20px;
     text-align: center;
     color: var(--muted);
     gap: 12px;
 }

 .empty-state svg {
     opacity: .3;
 }

 .empty-state h3 {
     font-family: var(--font-head);
     font-size: 20px;
     color: var(--text);
 }

 footer {
     border-top: 1px solid var(--border);
     background: var(--surface);
     margin-top: 32px;
     padding: 20px 24px;

 }

 footer .container {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 14px;

 }

 footer address {
     font-style: normal;
     font-size: 13px;
     color: var(--muted);
     display: flex;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
     text-align: center;
 }

 footer address a {
     display: flex;
     align-items: center;
 }

 footer address img {
     height: 22px;
     opacity: .7;
     transition: opacity .2s;
 }

 footer address img:hover {
     opacity: 1;
 }