/* =========================================================
   DULCESITO — UI PASTEL URBANA (AJOLÓTE)
   - Paleta pastel rosa/aqua + glass + contraste limpio
   - Evita duplicados y conflictos de modal/galería
   ========================================================= */

/* =========================
   1) PALETA / TOKENS
   ========================= */
:root{
  /* Colores del logo (pastel) */
  --pink: #ff6ea6;
  --pink-soft: rgba(255, 110, 166, .22);
  --aqua: #45d7e6;
  --aqua-soft: rgba(69, 215, 230, .20);

  /* Glass / Fondo*/
  --overlay: rgba(238, 58, 214, 0.35);
  --overlay-strong: rgba(0,0,0,.55);
  --card: rgba(10,10,12,.58);
  --card-2: rgba(10,10,12,.42);
  

    /* Glass / Fondo 
  --overlay: rgba(238, 58, 214, 0.35);
  --overlay-strong: rgba(28, 181, 219, 0.55);
  --card: rgba(10,10,12,.58);
  --card-2: rgba(10,10,12,.42);*/

  /* Bordes y brillos */
  --stroke: rgba(255,255,255,.16);
  --stroke-soft: rgba(255,255,255,.10);

  /* Texto */
  --text: rgba(255,255,255,.98);
  --muted: rgba(255,255,255,.80);

  /* Sombras */
  --shadow: 0 18px 70px rgba(0,0,0,.35);

  /* Fondo inyectado por Flask */
  --bg-image: url("/static/img/90079.jpg");
  background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      /* color: var(--text);*/
      position: relative;
      overflow-x: hidden;

  /* Radios */
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;
}

/* =========================
   2) BASE / LAYOUT
   ========================= */
*{ box-sizing:border-box; }
html, body { height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body{
  color: var(--text);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  overflow-x:hidden;
  
}

/* Overlay + “tinte pastel” para unificar el mood */
body::before{
  content:"";
  position: fixed;
  inset:0;
  background-image: var(--bg-image);
  background:
    radial-gradient(1200px 700px at 20% 5%, var(--pink-soft), transparent 60%),
    radial-gradient(1000px 700px at 85% 30%, var(--aqua-soft), transparent 55%),
    linear-gradient(180deg, var(--overlay), rgba(0,0,0,.62)); 
       
  pointer-events:none;
  
}

.container{
  
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 14px 14px 90px;
  display: grid;
  gap: 14px;
  position: relative;
}

/* =========================
   3) TOPBAR
   ========================= */
.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(8,8,10,.35);
  border-bottom: 1px solid var(--stroke-soft);
  backdrop-filter: blur(12px);
}

.brand{ display:flex; align-items:center; gap:10px; min-width: 0; }
.logoDot{
  width: 14px; height: 14px; border-radius:999px;
  background: linear-gradient(135deg, var(--pink), var(--aqua));
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.brandName{ font-weight: 950; letter-spacing: .3px; }
.brandSub{ font-size:12px; opacity:.85; }

.nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.nav a{ color:var(--text); text-decoration:none; font-weight:900; opacity:.9; font-size: 13px; }
.nav a:hover{ opacity:1; text-decoration: underline; }

/* =========================
   4) HERO / CARDS
   ========================= */
.hero{ padding: 18px 14px 6px; }

.heroCard,
.card,
.brandSection{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: 16px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.heroCard{ padding: 18px; }
.heroCard h1{ margin: 10px 0 10px; font-size: clamp(28px, 4.5vw, 44px); }
.heroCard p{ margin: 0 0 14px; font-size: 20px; line-height: 1.45; opacity:.96; }

h2{ margin:0 0 10px; font-size: 22px; }
.muted{ opacity:1; color: var(--muted); }

.tag{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  font-size: 16px;
}
.heroActions{ display:flex; gap: 10px; flex-wrap: wrap; }

/* =========================
   5) INPUTS / SELECTS
   ========================= */
.sectionHead{ display:flex; justify-content: space-between; align-items:center; gap: 10px; flex-wrap:wrap; }

.input, .select{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: var(--text);
  outline:none;
  width: min(360px, 100%);
  backdrop-filter: blur(10px);
}
.select{ width: min(280px, 100%); background: rgba(0,0,0,.20); }
.input::placeholder{ color: rgba(255,255,255,255); }

.input:focus, .select:focus{
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 0 0 4px rgba(255, 110, 166, .12);
}

/* =========================
   6) BOTONES (acentos pastel)
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,255);
  background: linear-gradient(135deg, rgba(255,110,166,255), rgba(69,215,230,255));;
  color: var(--text);
  text-decoration:none;
  font-weight: 1000;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255,110,166,255), rgba(69,215,230,255));
  box-shadow: linear-gradient(135deg, rgba(255,110,166,255), rgba(69,215,230,255));
}

/* Botón primario con gradiente pastel */
.btnPrimary{
  border-color: linear-gradient(135deg, rgba(255,110,166,255), rgba(69,215,230,255));
  background: linear-gradient(135deg, rgba(255,110,166,255), rgba(69,215,230,255));
}
.btnPrimary:hover{
  background: linear-gradient(135deg, rgba(255,110,166,255), rgba(69,215,230,255));
}

.btnSmall{ padding: 10px 12px; font-size: 14px; }
.full{ width:100%; }

/* =========================
   7) GRID / PRODUCTOS
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.productCard{
  grid-column: span 12;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 14px;
  background: var(--card-2);
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.productCard:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
}

.pcTitle{ font-weight: 950; line-height:1.25; }
.pcMeta{ font-size: 12px; opacity:.92; color: var(--muted); margin-top: 4px; }
.pcBottom{ display:flex; justify-content: space-between; align-items:center; gap: 10px; }
.pcPrice{ font-weight: 950; }
.pcUnit{ font-size: 12px; opacity:.85; margin-left: 6px; }

@media (min-width: 860px){
  .productCard{ grid-column: span 6; }
}
@media (min-width: 1080px){
  .productCard{ grid-column: span 4; }
}

/* Miniaturas: sin recorte, centradas, con “marco” */
.thumb{
  width: 100%;
  height: 150px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(220px 140px at 30% 20%, rgba(255,110,166,.12), transparent 60%),
    radial-gradient(260px 160px at 80% 60%, rgba(69,215,230,.10), transparent 65%),
    rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: contain;
  object-position: center;
  display:block;
  padding: 10px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
    
}
.thumbFallback{ opacity:.85; font-weight:950; color: rgba(255,255,255,.85); }

/* =========================
   8) STEPS
   ========================= */
.steps{ display:grid; gap: 10px; }
.step{
  display:flex; gap: 12px; align-items:flex-start;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px;
  border-radius: 14px;
}
.stepIcon{
  width: 32px; height: 32px; border-radius: 12px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(135deg, rgba(255,110,166,.22), rgba(69,215,230,.18));
  font-weight: 950;
}

/* =========================
   9) MODAL PRODUCTO
   ========================= */
   
.modal{
  position: fixed; inset:0;
  display:none;
  z-index: 100;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
  padding: 18px;
}
.modal.open{ display:grid; place-items:center; }

.modalPanel{
  width: min(920px, 100%);
  background: rgba(0,0,0,.80);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  overflow:hidden;
  box-shadow: 0 18px 90px rgba(0,0,0,.55);
}

.modalHeader{
  display:flex; justify-content: space-between; align-items:center;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modalTitle{ font-weight: 1000; font-size: 18px; }

.modalBody{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
}

/* IMPORTANTE:
   Nos quedamos con el modal SIMPLE (#modalImage) por ahora.
   NO ocultamos .modalImageWrap para no “romper” el modal. */
.modalImageWrap{
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow:hidden;
  background:
    radial-gradient(260px 160px at 20% 15%, rgba(255,110,166,.16), transparent 60%),
    radial-gradient(300px 200px at 85% 70%, rgba(69,215,230,.12), transparent 65%),
    rgba(255,255,255,.05);
}
.modalImage{
  width:100%;
  height: 260px;            /* mobile */
  object-fit: contain;      /* <- clave: NO recorta */
  object-position: center;
  display:block;
  padding: 12px;
  background: rgba(0,0,0,.10);
}
@media (min-width: 860px){
  .modalBody{ grid-template-columns: 1.1fr .9fr; align-items:start; }
  .modalImage{ height: 340px; }
}

.modalPrice{ font-weight: 1000; font-size: 24px; margin-top: 6px; }
.modalMeta{ font-size: 13px; color: var(--muted); }
.modalDesc{ margin: 10px 0 0; line-height: 1.45; opacity:.96; }
.modalActions{ display:grid; gap: 10px; margin-top: 12px; }

/* Flechas y dots del carrusel simple (IDs que ya usas en JS) */
#modalPrevBtn, #modalNextBtn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index: 5;
  width:42px; height:42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
#modalPrevBtn{ left: 10px; }
#modalNextBtn{ right: 10px; }

/* Si por algún motivo existiera otro par fuera del wrap, lo ocultamos */
.modalPanel > #modalPrevBtn,
.modalPanel > #modalNextBtn,
.modalBody > #modalPrevBtn,
.modalBody > #modalNextBtn{
  display:none !important;
}

#modalDots{
  position:absolute;
  left: 0; right: 0;
  bottom: 10px;
  display:flex;
  justify-content:center;
  gap:8px;
  z-index: 6;
}
#modalDots .dot{
  width:10px; height:10px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.18);
  cursor:pointer;
}
#modalDots .dot.active{
  background: rgba(255,255,255,.92);
}

/* =========================
   10) CARRITO (FAB + DRAWER)
   ========================= */
.cartFab{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 200;
  display: inline-flex;
  gap: 8px;
  align-items:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(255,110,166,.22), rgba(69,215,230,.18));
  color:#fff;
  font-weight: 950;
  cursor:pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.cartDrawer{
  position: fixed;
  inset: 0;
  z-index: 190;
  display:none;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.cartDrawer.open{ display:block; }

.cartPanel{
  position:absolute;
  right:0; top:0; bottom:0;
  width: min(420px, 92vw);
  background: rgba(0,0,0,.82);
  border-left: 1px solid rgba(255,255,255,.14);
  padding: 14px;
  display:flex;
  flex-direction: column;
}

.cartHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.cartItems{ padding: 12px 0; overflow:auto; flex:1; }

.cartRow{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cartControls{ display:flex; gap: 8px; align-items:center; }
.cartQty{ min-width: 22px; text-align:center; font-weight: 950; }

.cartFooter{
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 10px;
  display:grid;
  gap: 10px;
}
.cartTotalRow{
  display:flex;
  justify-content: space-between;
  font-weight: 950;
}

/* Botón icon */
.iconBtn{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
}

/* =========================
   11) TOAST
   ========================= */
.toast{
  position: fixed;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.80);
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 950;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 250;
}
.toastShow{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* =========================
   12) MARCAS (CARRUSEL HOME)
   ========================= */

/* Contenedor visual */
.brandSection{
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 10px 14px;
}

/* (Tu HTML trae brandFrame + brandHeader. Antes no estaban definidos.)
   Los definimos para evitar layout raro/saltos */
.brandFrame{
  width: 100%;
}
.brandHeader{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.brandTitle{
  font-weight: 1000;
  font-size: 18px;
}
.brandHint{
  font-size: 12px;
  opacity: .85;
}

/* ✅ ESTE es el viewport real del carrusel (la “ventana”).
   Antes estabas usando brandSection con overflow hidden,
   pero el JS anima .brandRail con transform, así que el viewport debe
   cortar el contenido para que no “se vea fuera” */
.brandViewport{
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

/* Rail */
.brandRail{
  display:flex;
  gap: 16px;
  align-items:stretch;
  width: max-content;
  will-change: transform;
  padding: 10px 6px;

  /* ✅ evita micro saltos por “subpixel rendering” cuando animas transform */
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

/* Cards grandes tipo producto */
.brandPill{
  flex: 0 0 auto;
  width: 220px;
  height: 260px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(240px 160px at 30% 25%, rgba(255,110,166,.14), transparent 60%),
    radial-gradient(260px 180px at 75% 70%, rgba(69,215,230,.12), transparent 65%),
    rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
  transition: transform .2s ease, box-shadow .2s ease;
}
.brandPill:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.brandPill img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 26px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.22));
}
.brandPill .fallback{
  font-size: 18px;
  font-weight: 950;
  text-align: center;
  opacity: .9;
  padding: 20px;
}

@media (max-width: 520px){
  .brandPill{
    width: 86vw;
    height: 260px;
  }
}

/* Override (cuando el “logo” viene de producto override) */
/*.brandPill.brandPillOverride {
  outline: 2px solid rgba(43,213,118,.45);
}

/* =========================
   13) FOOTER
   ========================= */
.footer{
  position: fixed;
  left:0; right:0; bottom:0;
  padding: 10px 16px;
  text-align:center;
  font-size: 13px;
  color: rgba(255,255,255,.86);
  background: rgba(8,8,10,.35);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}

/* =========================================================
   CENTER PACK (TIPOGRAFÍA + BOTONES + SECCIONES)
   PÉGALO AL FINAL DEL CSS
   Objetivo: que el “contenido” de cada bloque se vea centrado
   sin romper topbar, grid, carrito, etc.
   ========================================================= */

/* 1) Centrar texto por defecto dentro de secciones tipo “card” */
.heroCard,
.card,
.brandSection,
.modalInfo{
  text-align: center;
}

/* 2) Centrar elementos “inline” como tags/badges */
.heroCard .tag,
.card .tag{
  margin-left: auto;
  margin-right: auto;
}

/* 3) Botones centrados en hero y acciones */
.heroActions{
  justify-content: center;
}

/* Si en algún lugar los botones están en fila */
.modalActions{
  justify-items: center;
}
.modalActions .btn{
  width: min(420px, 100%);
}

/* 4) Inputs y selects centrados (sin cambiar su ancho máximo) */
.sectionHead{
  justify-content: center;
}
.sectionHead .input,
.sectionHead .select{
  margin-left: auto;
  margin-right: auto;
}

/* 5) “Cómo funciona” (steps) centrado */
.steps{
  justify-items: center;
}
.step{
  width: min(880px, 100%);
  text-align: left;
}
/* Pero deja el título del bloque centrado */
.card > h2,
.card > h3{
  text-align: center;
}

/* 6) Modal: texto centrado, pero sin romper layout */
.modalPrice,
.modalMeta,
.modalDesc{
  text-align: center;
}

/* 7) Centrar las flechas SOLO dentro del recuadro de imagen del modal */
.modalImageWrap{
  display: grid;
  place-items: center;
}
#modalPrevBtn, #modalNextBtn{
  display:flex;
}

/* =========================================================
   EXCEPCIONES IMPORTANTES (NO TOCAR)
   ========================================================= */

/* Topbar: se queda como está */
.topbar,
.nav,
.brand{
  text-align: left;
}

/* En la tarjeta del producto: el precio y el botón van a los lados */
.pcBottom{
  justify-content: space-between;
}

/* Carrito: respeta su layout */
.cartPanel,
.cartHeader,
.cartRow,
.cartFooter{
  text-align: left;
}

/* =========================================================
   AJUSTE: imágenes de producto más grandes y "cuadradas"
   - Mobile first (lo más importante)
   - Desktop sigue fluido y no exagerado
   ========================================================= */

/* La miniatura se vuelve más alta y “cuadrada” (sin recorte) */
.thumb{
  /* antes: height:150px */
  height: 210px;
  display: grid;
  place-items: center;
}

.thumb img{
  /* ya tienes contain, aquí mejoramos presencia */
  width: 100%;
  height: 100%;
  object-fit: contain;     /* no recorta */
  object-position: center;
  padding: 12px;           /* marco más amplio */
}

/* En móvil: la card se siente "centrada" y la imagen manda */
@media (max-width: 520px){
  .productCard{
    padding: 16px;
    gap: 12px;
  }

  .thumb{
    height: min(52vh, 320px); /* grande en pantalla, pero con límite */
    border-radius: 18px;
  }

  .pcInfo{
    text-align: center;
  }

  .pcTitle{
    font-size: 15px;
    letter-spacing: .2px;
  }

  .pcMeta{
    font-size: 12px;
  }

  /* Mantén precio + botón visibles sin estorbar */
  .pcBottom{
    align-items: center;
    gap: 12px;
  }

  .pcPrice{
    font-size: 16px;
  }

  .btnSmall{
    padding: 12px 14px; /* botón más cómodo en touch */
  }
}

/* En desktop: más grande que antes pero sin “gigante” */
@media (min-width: 860px){
  .thumb{
    height: 220px;
  }
}

/* En pantallas grandes: un poco más para lucir catálogo */
@media (min-width: 1080px){
  .thumb{
    height: 240px;
  }
}

#priceListSection{
  text-align: center;
}
#priceListSection .btn{
  width: min(420px, 100%);
}
.logoWrapper{
  display: flex;
  justify-content: center;
  align-items: center;
}

.logoARAME{
  width: auto;
  height: auto;

  background-image: url("/static/img/ui/bitmap.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;  
}
.logoARAME{
  width: min(384px, 60vw);
  height: min(180px, 60vw);
}

/* =========================
   FIX MODAL: texto centrado y ocupa el ancho (sin 2 columnas)
   ========================= */

/* Header: título centrado, X a la derecha */
.modalHeader{
  position: relative;
  justify-content: center;
}
.modalHeader .iconBtn,
#closeModalBtn{
  position: absolute;
  right: 12px;
  top: 10px;
}

/* Body: SIEMPRE 1 columna (también en desktop) */
.modalBody{
  grid-template-columns: 1fr !important;
  justify-items: center;
}

/* Panel de info: ancho cómodo y centrado */
.modalInfo{
  width: min(760px, 100%);
  text-align: center;
}

/* Imagen: más grande y centrada */
.modalImageWrap{
  width: min(860px, 100%);
}

.modalImage{
  height: clamp(260px, 52vh, 520px);
  width: 100%;
  object-fit: contain;
}

/* Dots siempre centrados */
#modalDots{
  justify-content: center;
}

/* =========================
   FIX THUMBS: imágenes más grandes, sin recorte
   ========================= */

.thumb{
  /* En vez de altura fija 150 */
  height: auto;
  aspect-ratio: 1 / 1; /* cuadrado “bonito” para catálogo */
  min-height: 220px;
}

/* Tablet / pantallas medianas tipo 853x1280 */
@media (min-width: 700px){
  .thumb{
    min-height: 260px;
  }
}

/* Desktop: un poco más grande sin exagerar */
@media (min-width: 1080px){
  .thumb{
    min-height: 240px;
  }
}

/* Forzar contain por si algo lo pisa */
.thumb img{
  object-fit: contain !important;
  object-position: center !important;
  width: 100%;
  height: 100%;
}