/* A tener en cuenta - by Tecnoambassador
   Ajustá estas variables para igualar a Tecnodestacado. */
.tatc{
  --tatc-side:2.8%;          /* espacio lateral */
  --tatc-gap:32px;         /* separación entre tarjetas */
  --tatc-accent:#f7a8c0;   /* fondo de los botones de navegación */
  --tatc-nav-w:36px;       /* ancho de cada botón de navegación */
  --tatc-nav-h:33px;       /* alto de los botones de navegación */
  --tatc-vp:14px;       /* aire interno del carrusel para que no se recorte el borde/sombra */
  --tatc-price:#e30613;
  --tatc-text:#494949;
  box-sizing:border-box;padding:0 var(--tatc-side);margin:28px 0;font-family:inherit;
}
.tatc *{box-sizing:border-box}
.tatc__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.tatc__titlebox{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.tatc__title{margin:0;font-size:27px;font-weight:700;letter-spacing:0;text-transform:uppercase;line-height:1.1;color:var(--tatc-text)}
.tatc__line{display:block;width:196px;max-width:100%;height:3px;border-radius:3px;background:linear-gradient(90deg,#0b2a5b 0%,#29b6f6 100%)}
.tatc__nav{display:flex;flex:0 0 auto;border-radius:999px;overflow:hidden;background:var(--tatc-accent)}
.tatc__btn{width:var(--tatc-nav-w);height:var(--tatc-nav-h);display:flex;align-items:center;justify-content:center;padding:0 0 3px;border:0;background:transparent;color:#fff;font-size:20px;font-weight:700;line-height:1;cursor:pointer;transition:background .2s}
.tatc__btn:hover{background:rgba(255,255,255,.22)}
.tatc__btn+.tatc__btn{border-left:2px solid rgba(255,255,255,.75)}

.tatc__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--tatc-vp);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:12px var(--tatc-vp) 26px;margin:-12px calc(var(--tatc-vp) * -1) -26px}
.tatc__viewport::-webkit-scrollbar{display:none}
.tatc__track{display:flex;gap:var(--tatc-gap);list-style:none;margin:0;padding:0}
.tatc__slide{flex:0 0 calc((100% - var(--tatc-gap)) / 2);min-width:0;scroll-snap-align:start}
.tatc__track::after{content:"";flex:0 0 1px;margin-left:calc(var(--tatc-vp) - var(--tatc-gap) - 1px)}

.tatc__card{display:flex;height:100%;min-height:200px;background:#fff;border-radius:3px;box-shadow:0 1px 6px rgba(0,0,0,.14);overflow:hidden}
.tatc__img{flex:0 0 38%;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.tatc__img img{display:block;width:100%;height:240px;max-width:none;max-height:none;object-fit:contain;transform:none!important;transition:none}
.tatc__body{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 18px 16px 4px}
.tatc__name{margin:0 0 8px;font-size:clamp(14px,1.25vw,20px);font-weight:700;text-transform:uppercase;line-height:1.2;color:var(--tatc-text)}
.tatc__name a{color:inherit;text-decoration:none}
.tatc__name a:hover{text-decoration:underline}
.tatc__desc{margin:0;font-size:clamp(12px,1vw,16px);text-transform:uppercase;line-height:1.3;color:#666}
.tatc__foot{margin-top:auto;padding-top:12px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px}
.tatc__prices{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.tatc__price{color:var(--tatc-price);font-weight:700;font-size:clamp(18px,1.7vw,26px);line-height:1}
.tatc__old{color:#999;text-decoration:line-through;font-size:clamp(12px,1vw,15px)}
.tatc__form{margin:0}
/* Botón: estilo original del tema (btn btn-primary + Tecno Colores); acá solo layout */
.tatc__add{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}
.tatc__add .material-icons{font-size:18px;line-height:1;flex:none}

@media (min-width:768px){.tatc--short .tatc__nav{display:none}}

/* Celular: de a 1 producto */
@media (max-width:767px){
  .tatc{--tatc-vp:10px;--tatc-gap:16px;--tatc-side:3%;--tatc-nav-w:30px;--tatc-nav-h:26px}
  .tatc__btn{font-size:16px}
  .tatc__head{margin-bottom:24px}
  .tatc__line{width:62%}
  .tatc__slide{flex-basis:100%}
  .tatc__card{min-height:170px}
  .tatc__img{flex-basis:44%;padding:8px}
  .tatc__img img{height:230px}
  .tatc__title{font-size:28px}
  .tatc__name{font-size:15px}
  .tatc__desc{font-size:12px}
  .tatc__price{font-size:20px}
}
/* Celular chico: imagen arriba, botón a todo el ancho */
@media (max-width:479px){
  .tatc__card{flex-direction:column}
  .tatc__img{flex:0 0 auto;padding:10px 10px 0}
  .tatc__img img{height:240px}
  .tatc__body{padding:12px 16px 16px}
}
@media (prefers-reduced-motion:reduce){.tatc__btn{transition:none}}

/* Animación de entrada */
.tatc--anim .tatc__card{opacity:0}
.tatc--anim.is-in .tatc__card{animation-duration:.7s;animation-fill-mode:both;animation-delay:calc(min(var(--i),5) * .12s)}
.tatc--anim[data-anim="up"].is-in .tatc__card{animation-name:tatc-up}
.tatc--anim[data-anim="zoom"].is-in .tatc__card{animation-name:tatc-zoom}
.tatc--anim[data-anim="left"].is-in .tatc__card{animation-name:tatc-left}
.tatc--anim[data-anim="right"].is-in .tatc__card{animation-name:tatc-right}
.tatc--anim[data-anim="flip"].is-in .tatc__card{animation-name:tatc-flip;animation-duration:.8s}
.tatc--anim[data-anim="bounce"].is-in .tatc__card{animation-name:tatc-bounce;animation-duration:.9s}
@keyframes tatc-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes tatc-zoom{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes tatc-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes tatc-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes tatc-flip{from{opacity:0;transform:perspective(800px) rotateY(-80deg)}to{opacity:1;transform:none}}
@keyframes tatc-bounce{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){.tatc--anim .tatc__card{opacity:1;animation:none!important}}

/* Efecto hover (como Tecno vitrina): el bloque se mueve al pasar por cualquier parte, y la capa gris aparece solo al pasar por el recuadro de la imagen */
.tatc__card{transition:box-shadow .25s ease,translate .25s ease}
.tatc__img{position:relative}
@media (hover:hover){
  .tatc__card:hover{translate:0 -3px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
}
@media (prefers-reduced-motion:reduce){.tatc__card{transition:none}.tatc__card:hover{translate:none}}

/* ===== Estilo unificado de productos (igual en toda la web) ===== */
.tatc__card,.tatc__img,.tatc__body{background:#fff}
.tatc__form{display:block}
.tatc__buy{display:flex;align-items:stretch;gap:8px}
.tatc__qty{flex:none;display:inline-flex;align-items:stretch;border:1px solid #d6d6d6;border-radius:4px;overflow:hidden;background:#fff}
.tatc__qty-b{width:28px;padding:0;border:0;background:#fff;color:#444;font-size:18px;line-height:1;cursor:pointer;transition:color .15s}
.tatc__qty-b:hover{color:#e30613}
.tatc__qty-i{width:38px;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}
.tatc__qty-i::-webkit-outer-spin-button,.tatc__qty-i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:479px){.tatc__foot{flex-direction:column;align-items:stretch}.tatc__prices{align-items:flex-start;text-align:left}.tatc__form,.tatc__buy{width:100%}.tatc__buy .tatc__add{flex:1 1 auto}}

/* ===== Igual a la tarjeta nativa del tema: botón chico solo con ícono ===== */
.tatc__add .material-icons{font-size:20px}
.tatc__buy .tatc__add{flex:0 0 auto;padding-left:.8rem;padding-right:.8rem}
.tatc__buy .tatc__qty{flex:1 1 auto}
.tatc__qty-i{flex:1 1 auto;width:auto}
.tatc__foot a.tatc__add.btn-outline-primary{margin:0 auto}

/* ===== Imagen 1:1 que ocupa todo el recuadro (v1.2.4) ===== */
.tatc__card{min-height:0;align-items:stretch}
.tatc__img{flex:0 0 38%!important;width:38%;aspect-ratio:1/1;padding:0!important;position:relative;display:block;align-self:flex-start;overflow:hidden}
.tatc__img img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center;margin:0!important;padding:0!important}
@media (max-width:767px){
  .tatc__img{flex-basis:44%!important;width:44%;padding:0!important}
  .tatc__img img{height:100%!important}
}
@media (max-width:479px){
  .tatc__card{flex-direction:column}
  .tatc__img{flex:0 0 auto!important;width:100%;max-width:340px;margin:0 auto;align-self:center;padding:0!important}
  .tatc__img img{height:100%!important}
}

/* el auto-recorte usa transform inline */
.tatc__img img{will-change:transform}