/* ====== Carrusel (Hero + Thumbs) ====== */
 .carousel-container {
   position: relative;
   max-width: 1200px;
   margin: 1rem auto;
   overflow: hidden;
   border-radius: 12px;
   background: #000
 }

 .hero {
   aspect-ratio: 16/9;
   width: 100%;
   background: #111;
   display: flex;
   align-items: center;
   justify-content: center
 }

 .hero img {
   width: 100%;
   height: 100%;
   object-fit: cover
 }

 .thumbs {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: .5rem;
   padding: .75rem;
   background: #000
 }

 .thumbs img {
   width: 100%;
   height: 74px;
   object-fit: cover;
   border-radius: 8px;
   cursor: pointer;
   opacity: .88;
   border: 2px solid transparent;
   transition: .2s
 }

 .thumbs img:hover {
   opacity: 1;
   border-color: #fff
 }

 .card {
   background: var(--card);
   padding: 1.25rem;
   border-radius: 12px;
   box-shadow: var(--shadow)
 }

 h1,
 h2,
 h3 {
   margin: .25rem 0 1rem
 }

 .muted {
   color: var(--muted)
 }

 .chips {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem
 }

 .chip {
   background: #f1f1f1;
   border-radius: 999px;
   padding: .35rem .7rem;
   font-size: .88rem
 }

 /* Grid clave:valor */
 .kv {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: .5rem .75rem
 }

 .kv div {
   padding: .35rem 0;
   border-bottom: 1px dashed #eee
 }

 .kv b {
   display: block;
   font-size: .9rem;
   color: #555
 }

 /* Tarjetas de medidas */
 .grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: .75rem
 }

 .badge {
   display: inline-block;
   padding: .25rem .55rem;
   border-radius: 6px;
   font-size: .8rem
 }

 .badge-success {
   background: #d1fae5;
   color: #065f46
 }

 .badge-warning {
   background: #fef3c7;
   color: #92400e
 }

 .badge-secondary {
   background: #e5e7eb;
   color: #374151
 }

 .badge-dark {
   background: #e9d5ff;
   color: #6b21a8
 }

 .price {
   font-size: 1.25rem;
   font-weight: 700
 }

 .small {
   font-size: .9rem
 }

 footer {
   text-align: center;
   padding: 1rem;
   color: #777;
   font-size: .9rem
 }

 /* ====== Responsivo ====== */

 /* Tablets <= 992px */
 @media (max-width: 992px) {
   header {
     padding: 0.9rem 1rem
   }

   .container {
     grid-template-columns: 1fr;
     gap: 1.25rem
   }

   .grid-3 {
     grid-template-columns: repeat(2, 1fr)
   }

   .kv {
     grid-template-columns: 1fr 1fr
   }
 }

 /* Móviles <= 600px */
 @media (max-width: 600px) {
   body {
     font-size: 16px
   }

   header {
     padding: .8rem 1rem
   }

   header h1 {
     font-size: 1.05rem
   }

   .carousel-container {
     border-radius: 0;
     margin: 0 auto
   }

   .hero {
     aspect-ratio: 16/10
   }

   .thumbs {
     display: flex;
     gap: .5rem;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     padding: .5rem .75rem .75rem;
   }

   .thumbs img {
     flex: 0 0 28%;
     max-width: 28%;
     height: 70px;
     scroll-snap-align: start;
     border-radius: 8px;
   }

   .container {
     padding: 0 .75rem;
     margin: 1rem auto
   }

   .card {
     padding: 1rem;
     border-radius: 10px
   }

   h1 {
     font-size: 1.25rem
   }

   h2 {
     font-size: 1.05rem
   }

   .price {
     font-size: 1.15rem
   }

   .grid-3 {
     grid-template-columns: 1fr
   }

   .kv {
     grid-template-columns: 1fr
   }

   .chips {
     gap: .4rem
   }

   .chip {
     font-size: .85rem
   }
 }