.tnv-section{--tnv-main:#0a8bd6;--tnv-arrow:#f7a8c0;--tnv-price:#e30613;--tnv-side:3%;--tnv-cols:5;--tnv-max:6;--tnv-gap:18px;margin:28px 0;padding:0 var(--tnv-side);font-family:inherit;box-sizing:border-box}
.tnv-section .tnv-row{container-type:inline-size}
.tnv-section .tnv-row + .tnv-row{margin-top:34px}
.tnv-section *{box-sizing:border-box}
.tnv-section .tnv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.tnv-section .tnv-title{margin:0;padding:0;text-align:left;font-family:'Roboto Condensed','Arial Narrow',Roboto,Arial,sans-serif;font-size:26px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#3d3d3d;line-height:1.15;min-width:0}
.tnv-section .tnv-title span{display:inline-block;position:relative;padding-bottom:7px}
.tnv-section .tnv-title span:after{content:"";position:absolute;left:0;bottom:0;width:62%;height:3px;border-radius:3px;background:linear-gradient(90deg,#0b2a5b,#29b6f6)}
.tnv-section .tnv-arrows{flex:none;display:flex;border-radius:18px;overflow:hidden}
.tnv-section .tnv-arrows button{width:36px;height:33px;border:0;padding:0;background:var(--tnv-arrow);color:#fff;font-size:19px;line-height:1;cursor:pointer;transition:filter .2s}
.tnv-section .tnv-arrows button + button{border-left:2px solid rgba(255,255,255,.75)}
.tnv-section .tnv-arrows button:hover{filter:brightness(.92)}

.tnv-section .tnv-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--tnv-cols) - 1) * var(--tnv-gap)) / var(--tnv-cols));gap:var(--tnv-gap);align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 3px 16px}
.tnv-section .tnv-track::-webkit-scrollbar{display:none}

/* Tarjeta: mismo formato que las nativas del tema (medidas tomadas con la pantalla al 110%) */
.tnv-section .tnv-card{scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;background:#fff;border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,.14);overflow:hidden;transition:transform .2s,box-shadow .2s}
.tnv-section .tnv-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tnv-section .tnv-img{display:block;flex:none;height:237px;background:#fff;padding:5px}
.tnv-section .tnv-img img{width:100%;height:100%;object-fit:contain;display:block}
.tnv-section .tnv-name{display:flex;align-items:center;justify-content:center;flex:none;min-height:36px;padding:8px 11px;text-align:center;background:#f7f7f7;color:#494949;font-family:inherit;font-size:12.7px;font-weight:700;letter-spacing:.45px;line-height:20px;text-transform:uppercase;text-decoration:none}
.tnv-section .tnv-name span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;word-break:break-word}
.tnv-section .tnv-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;margin-top:auto;min-height:59px;padding:12px 12px}
.tnv-section .tnv-price{color:var(--tnv-price);font-family:inherit;font-weight:700;font-size:16px;line-height:1.15;white-space:nowrap}
.tnv-section .tnv-old{display:block;color:#888;font-size:11px;font-weight:400;text-decoration:line-through}
.tnv-section .tnv-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:34px;min-width:83px;padding:0 11px;background:var(--tnv-main);color:#fff;font-family:inherit;font-size:12.7px;font-weight:400;line-height:1;letter-spacing:0;text-transform:uppercase;border:0;border-radius:2px;text-decoration:none;white-space:nowrap;transition:filter .2s}
.tnv-section .tnv-btn:hover{filter:brightness(.9);color:#fff}
.tnv-section .tnv-btn.is-loading{opacity:.6;pointer-events:none}
.tnv-section .tnv-btn.is-done{background:#2e9e4f}

/* Columnas según el ancho real de la fila (igual que Tecno Destacados), con tope configurable */
@container (max-width:1399px){.tnv-track{--tnv-cols:min(5,var(--tnv-max,6))}}
@container (max-width:1099px){.tnv-track{--tnv-cols:min(4,var(--tnv-max,6))}}
@container (max-width:819px){.tnv-track{--tnv-cols:min(3,var(--tnv-max,6))}}
@container (max-width:599px){.tnv-track{--tnv-cols:2}}
@container (min-width:1400px){.tnv-track{--tnv-cols:min(6,var(--tnv-max,6))}}

@media (max-width:768px){
  .tnv-section{--tnv-gap:10px;padding:0 max(var(--tnv-side),var(--tnv-side-m,10px))}
  .tnv-section .tnv-arrows button{width:30px;height:26px;font-size:16px}
  .tnv-section .tnv-img{height:auto;aspect-ratio:1/1}
  .tnv-section .tnv-name{padding:7px 8px;font-size:11px;letter-spacing:.3px;line-height:17px}
  .tnv-section .tnv-name span{-webkit-line-clamp:3;line-clamp:3}
  .tnv-section .tnv-foot{flex-direction:column;align-items:stretch;text-align:center;padding:10px}
  .tnv-section .tnv-btn{width:100%}
}

/* Animación de entrada (se elige en el panel del módulo) */
.tnv-section .tnv-row.tnv-animating .tnv-track{scroll-snap-type:none;overflow-x:hidden}
.tnv-section.tnv-anim-ready .tnv-row:not(.is-in) .tnv-card{opacity:0}
.tnv-section[data-anim="up"] .tnv-row.is-in .tnv-card{animation:tnvUp .65s cubic-bezier(.22,.8,.3,1) backwards;animation-delay:calc(var(--i,0) * 70ms)}
.tnv-section[data-anim="zoom"] .tnv-row.is-in .tnv-card{animation:tnvZoom .6s cubic-bezier(.22,.8,.3,1) backwards;animation-delay:calc(var(--i,0) * 70ms)}
.tnv-section[data-anim="left"] .tnv-row.is-in .tnv-card{animation:tnvSlideL .8s ease-out backwards;animation-delay:calc(var(--i,0) * 70ms)}
.tnv-section[data-anim="right"] .tnv-row.is-in .tnv-card{animation:tnvSlideR .8s ease-out backwards;animation-delay:calc(var(--i,0) * 70ms)}
.tnv-section[data-anim="flip"] .tnv-row.is-in .tnv-card{animation:tnvFlip .8s cubic-bezier(.22,.8,.3,1) backwards;animation-delay:calc(var(--i,0) * 90ms)}
.tnv-section[data-anim="bounce"] .tnv-row.is-in .tnv-card{animation:tnvBounce .9s ease-out backwards;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes tnvUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes tnvZoom{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes tnvSlideL{0%{opacity:0;transform:translateX(-120px)}35%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes tnvSlideR{0%{opacity:0;transform:translateX(120px)}35%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes tnvFlip{from{opacity:0;transform:perspective(900px) rotateY(-90deg)}to{opacity:1;transform:none}}
@keyframes tnvBounce{0%{opacity:0;transform:translateY(-60px)}55%{opacity:1;transform:translateY(12px)}75%{transform:translateY(-6px)}90%{transform:translateY(3px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .tnv-section.tnv-anim-ready .tnv-row:not(.is-in) .tnv-card{opacity:1}
  .tnv-section .tnv-row.is-in .tnv-card{animation:none!important}
}

/* Sellos sobre la foto (NUEVO, descuento) */
.tnv-section .tnv-img{position:relative}
.tnv-section .tnv-card .product-flags{position:absolute;top:8px;left:8px;right:auto;margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:4px;z-index:2;pointer-events:none;width:auto}
.tnv-section .tnv-card .product-flags .product-flag{position:static;margin:0;display:block;font-size:12px;line-height:1;padding:5px 7px;min-height:0}
.tnv-section .tnv-card .product-flags .product-flag.discount-percentage,.tnv-section .tnv-card .product-flags .product-flag.discount{background:#f00;color:#fff}

/* Capa gris sobre la foto al pasar el mouse (junto con el movimiento de la tarjeta) */
.tnv-section .tnv-img:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(60,60,60,.14);
  opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:1}
.tnv-section .tnv-card:hover .tnv-img:after{opacity:1}
@media (hover:none){.tnv-section .tnv-card:hover .tnv-img:after{opacity:0}}
