/* Tecno Vitrina - by Tecnoambassador (mismo diseño que Tecno Destacados) */
.tvt-section{--tvt-main:#018bd5;--tvt-arrow:#f7a8c0;--tvt-price:#e30613;--tvt-side:3%;--tvt-cols:5;--tvt-gap:18px;margin:0;padding:0 var(--tvt-side);font-family:inherit;box-sizing:border-box}
.tvt-section .tvt-row{container-type:inline-size}
.tvt-section{padding-top:14px;padding-bottom:6px}
.tvt-section + .tvt-section{padding-top:6px}
.tvt-section *{box-sizing:border-box}
.tvt-section .tvt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.tvt-section .tvt-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}
.tvt-section .tvt-title span{display:inline-block;position:relative;padding-bottom:7px}
.tvt-section .tvt-title span:after{content:"";position:absolute;left:0;bottom:0;width:62%;height:3px;border-radius:3px;background:linear-gradient(90deg,#0b2a5b,#29b6f6)}
.tvt-section .tvt-arrows{flex:none;display:flex;border-radius:18px;overflow:hidden}
.tvt-section .tvt-arrows button{width:36px;height:33px;border:0;padding:0;background:var(--tvt-arrow);color:#fff;font-size:19px;line-height:1;cursor:pointer;transition:filter .2s}
.tvt-section .tvt-arrows button + button{border-left:2px solid rgba(255,255,255,.75)}
.tvt-section .tvt-arrows button:hover{filter:brightness(.92)}

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

/* Tarjeta: mismo formato que las nativas del tema (medidas tomadas con la pantalla al 110%) */
.tvt-section .tvt-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}
.tvt-section .tvt-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tvt-section .tvt-img{display:block;flex:none;height:auto;aspect-ratio:var(--tc-card-ratio,1/1);box-sizing:border-box;background:#fff;padding:5px;transition:none}
.tvt-section .tvt-img img{width:100%;height:100%;object-fit:contain;display:block}
.tvt-section .tvt-name{display:flex;align-items:center;justify-content:center;flex:none;min-height:56px;box-sizing:border-box;padding:8px 11px;text-align:center;background:#fff;color:#494949;font-family:inherit;font-size:12.7px;font-weight:700;letter-spacing:.45px;line-height:20px;text-transform:uppercase;text-decoration:none}
.tvt-section .tvt-name span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;word-break:break-word}
.tvt-section .tvt-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;margin-top:auto;min-height:59px;padding:12px 12px}
.tvt-section .tvt-price{color:#e30613;font-family:inherit;font-weight:700;font-size:16px;line-height:1.15;white-space:nowrap}
.tvt-section .tvt-old{display:block;color:#888;font-size:11px;font-weight:400;text-decoration:line-through}
/* Botones: estilo original del tema (btn btn-primary + Tecno Colores); acá solo layout y estados */
.tvt-section .tvt-btn{flex:0 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;text-align:center;white-space:normal;text-decoration:none;line-height:1.2 !important}
.tvt-section .tvt-btn .material-icons{font-size:18px;line-height:1;flex:none}
.tvt-section .tvt-btn.is-loading{opacity:.6;pointer-events:none}
.tvt-section .tvt-btn.is-done,.tvt-section .tvt-btn.is-done:hover{--bs-btn-bg:#2e9e4f;--bs-btn-border-color:#2e9e4f;--bs-btn-hover-bg:#2e9e4f;--bs-btn-hover-border-color:#2e9e4f;background-image:none}

/* Columnas según el ancho real de la fila: tarjetas de ~220-260 px */
@container (min-width:1px){.tvt-track{--tvt-cols:min(2,var(--tvt-max,5))}}
@container (min-width:600px){.tvt-track{--tvt-cols:min(3,var(--tvt-max,5))}}
@container (min-width:820px){.tvt-track{--tvt-cols:min(4,var(--tvt-max,5))}}
@container (min-width:1100px){.tvt-track{--tvt-cols:min(5,var(--tvt-max,5))}}

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

/* Cabecera: "Ver todo" junto a las flechas */
.tvt-section .tvt-tools{flex:none;display:flex;align-items:center;gap:14px}
.tvt-section .tvt-all{font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;color:var(--tc-primary,var(--tvt-main))}
.tvt-section .tvt-all:hover{text-decoration:underline}
.tvt-section .tvt-title a{color:inherit;text-decoration:none}

/* Animaciones de entrada (se elige en el panel del módulo) */
.tvt-section .tvt-row.tvt-animating .tvt-track{scroll-snap-type:none;overflow-x:hidden}
.tvt-section.tvt-anim-ready .tvt-row:not(.is-in) .tvt-card{opacity:0}
.tvt-section .tvt-row.is-in .tvt-card{animation-fill-mode:backwards;animation-delay:calc(var(--i,0) * 70ms)}
.tvt-section[data-anim="fadeup"] .tvt-row.is-in .tvt-card{animation-name:tvtUp;animation-duration:.65s;animation-timing-function:cubic-bezier(.22,.8,.3,1)}
.tvt-section[data-anim="zoom"] .tvt-row.is-in .tvt-card{animation-name:tvtZoom;animation-duration:.6s;animation-timing-function:cubic-bezier(.22,.8,.3,1)}
.tvt-section[data-anim="slideleft"] .tvt-row.is-in .tvt-card{animation-name:tvtSlideL;animation-duration:.8s;animation-timing-function:ease-out}
.tvt-section[data-anim="slideright"] .tvt-row.is-in .tvt-card{animation-name:tvtSlideR;animation-duration:.8s;animation-timing-function:ease-out}
.tvt-section[data-anim="flip"] .tvt-row.is-in .tvt-card{animation-name:tvtFlip;animation-duration:.8s;animation-timing-function:cubic-bezier(.22,.8,.3,1)}
.tvt-section[data-anim="bouncein"] .tvt-row.is-in .tvt-card{animation-name:tvtBounce;animation-duration:.9s;animation-timing-function:ease-out}
@keyframes tvtUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes tvtZoom{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes tvtSlideL{0%{opacity:0;transform:translateX(-120px)}35%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes tvtSlideR{0%{opacity:0;transform:translateX(120px)}35%{opacity:1}100%{opacity:1;transform:translateX(0)}}
@keyframes tvtFlip{from{opacity:0;transform:perspective(900px) rotateY(-90deg)}to{opacity:1;transform:none}}
@keyframes tvtBounce{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){
  .tvt-section.tvt-anim-ready .tvt-row:not(.is-in) .tvt-card{opacity:1}
  .tvt-section .tvt-row.is-in .tvt-card{animation:none!important}
}

/* ===== Estilo unificado de productos (igual en toda la web) ===== */
.tvt-section .tvt-foot{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;text-align:center;min-height:0;padding:12px}
.tvt-section .tvt-price{white-space:normal;color:#e30613}
.tvt-section .tvt-buy{display:flex;align-items:stretch;justify-content:center;gap:8px}
.tvt-section .tvt-buy .tvt-btn{flex:1 1 auto;min-width:0;width:auto}
.tvt-section .tvt-qty{flex:none;display:inline-flex;align-items:stretch;border:1px solid #d6d6d6;border-radius:4px;overflow:hidden;background:#fff}
.tvt-section .tvt-qty__b{width:26px;padding:0;border:0;background:#fff;color:#444;font-size:17px;line-height:1;cursor:pointer;transition:color .15s}
.tvt-section .tvt-qty__b:hover{color:#e30613}
.tvt-section .tvt-qty__i{width:36px;min-width:0;padding:0;border:0;border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;border-radius:0;background:#fff;color:#333;font-size:14px;font-weight:600;text-align:center;box-shadow:none;outline:0;-moz-appearance:textfield;appearance:textfield}
.tvt-section .tvt-qty__i::-webkit-outer-spin-button,.tvt-section .tvt-qty__i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:768px){.tvt-section .tvt-foot{padding:10px}.tvt-section .tvt-buy .tvt-btn{width:auto}}
.tvt-section .tvt-card{border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,.14)}
.tvt-section .tvt-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tvt-section .tvt-img,.tvt-section .tvt-name,.tvt-section .tvt-foot{background:#fff}
.tvt-section .tvt-img img{transform:none;transition:none}

/* ===== Igual a la tarjeta nativa del tema: texto y precio a la izquierda, botón chico solo con ícono ===== */
.tvt-section .tvt-name{justify-content:flex-start;text-align:left;padding:10px 12px 4px}
.tvt-section .tvt-name span{text-align:left}
.tvt-section .tvt-foot{text-align:left;align-items:stretch;padding:4px 12px 12px;gap:8px}
.tvt-section .tvt-price{text-align:left}
.tvt-section .tvt-buy{justify-content:flex-start;gap:8px}
.tvt-section .tvt-qty{flex:1 1 auto;min-width:0}
.tvt-section .tvt-qty__b{flex:0 0 34px;width:34px;font-size:18px}
.tvt-section .tvt-qty__i{flex:1 1 auto;width:auto;min-width:0}
.tvt-section .tvt-buy .tvt-add{flex:0 0 auto;padding-left:.8rem;padding-right:.8rem}
.tvt-section .tvt-add .material-icons{font-size:20px}
.tvt-section .tvt-buy .tvt-btn:not(.tvt-add){flex:0 0 auto;margin:0 auto}
@media (max-width:768px){.tvt-section .tvt-name{padding:8px 10px 4px}.tvt-section .tvt-foot{padding:4px 10px 10px;text-align:left}.tvt-section .tvt-buy .tvt-add{width:auto}}

/* Borde fino y permanente en las tarjetas (valor único: --tc-card-border, definido en Tecno Menú) */
.tvt-section .tvt-card{border:var(--tc-card-border,1px solid #e2e5ea);box-sizing:border-box}