/* =====================================================================
   TIENDA (/shop): lista con filtros, tarjeta, ficha del producto y el
   atajo [productos]. Con los colores de la web: fondo morado, tarjetas
   blancas de esquinas redondas (como las de premios) y el violeta de
   los botones.
   ===================================================================== */

/* La paleta (--t-violeta, --t-texto...) esta en sitio.css: la comparten
   el cajon del carrito y Mi cuenta. */
.tienda{
  color:#fff;
  padding-bottom:30px;
}
.tienda a{text-decoration:none}

/* ---- Migas de pan ---- */
.t-migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 14px;padding:0;font-size:13px;color:#cdbbf0}
.t-migas li{display:flex;align-items:center;min-width:0}
.t-migas li + li::before{content:"›";margin:0 8px;opacity:.6}
.t-migas a{color:#e9ddff}
.t-migas a:hover{color:#fff;text-decoration:underline}
.t-migas [aria-current]{color:#fff;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}

/* ---- Cabecera: titulo + buscador ---- */
.t-cabeza{margin-bottom:18px}
.t-cabeza-fila{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.t-cabeza-titulo{display:flex;align-items:center;gap:14px;min-width:0}
.t-titulo{font-family:var(--fuente-titulo);font-weight:400;font-size:clamp(26px,5vw,38px);line-height:1.1;margin:0;color:#fff;letter-spacing:.3px;overflow-wrap:anywhere}
.t-conteo{margin:4px 0 0;color:#cdbbf0;font-size:14px}
.t-marca-logo{width:64px;height:64px;border-radius:16px;background:#fff;display:grid;place-items:center;padding:8px;flex:none}
.t-marca-logo img{max-width:100%;max-height:100%;object-fit:contain}
.t-banner{border-radius:var(--t-radio);overflow:hidden;margin-bottom:16px;line-height:0;background:#1d0a33}
.t-banner img{width:100%;height:auto;max-height:280px;object-fit:cover}

.t-buscar{position:relative;display:flex;align-items:center;flex:0 1 420px;min-width:0;background:#fff;border-radius:999px;padding:5px 5px 5px 16px;box-shadow:0 6px 20px rgba(15,5,40,.25)}
/* El campo va sin borde dentro de la capsula: el foco se ve en la capsula */
.t-buscar:focus-within{box-shadow:var(--foco-anillo),0 6px 20px rgba(15,5,40,.25)}
.t-buscar > svg{width:20px;height:20px;fill:none;stroke:#8a82a0;stroke-width:2;stroke-linecap:round;flex:none}
.t-buscar input{flex:1;min-width:0;border:0;outline:0;box-shadow:none;background:transparent;font:500 15px/1.2 var(--fuente);color:var(--t-texto);padding:10px 10px;-webkit-appearance:none;appearance:none}
.t-buscar input::-webkit-search-cancel-button{cursor:pointer}
.t-buscar button{border:0;border-radius:999px;background:linear-gradient(135deg,var(--t-violeta),var(--t-violeta-2));color:#fff;font:700 13px/1 var(--fuente);text-transform:uppercase;letter-spacing:.3px;padding:0 18px;min-height:40px;cursor:pointer}
.t-buscar button:hover{filter:brightness(1.08)}
@media (max-width:640px){.t-buscar{flex-basis:100%}}

/* Sugerencias mientras se escribe */
.t-sugerencias{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(15,5,40,.35);padding:6px;z-index:40;max-height:min(70vh,460px);overflow-y:auto;color:var(--t-texto)}
.t-sugerencias[hidden]{display:none}
.t-sug{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;color:var(--t-texto)}
.t-sug:hover,.t-sug.activa{background:#f4f0fc}
.t-sug-img{width:48px;height:48px;border-radius:10px;background:#f6f4fa;flex:none;display:grid;place-items:center;overflow:hidden}
.t-sug-img img{width:100%;height:100%;object-fit:contain}
.t-sug-txt{min-width:0;flex:1}
.t-sug-nombre{display:block;font-weight:700;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-sug-marca{display:block;font-size:12px;color:var(--t-suave)}
.t-sug-precio{font-family:var(--fuente-titulos);font-weight:600;color:var(--t-violeta);font-size:14px;white-space:nowrap}
.t-sug-todos{display:block;text-align:center;padding:10px;font-weight:700;font-size:13px;color:var(--t-violeta);border-top:1px solid var(--t-borde);margin-top:4px}
.t-sug-vacio{padding:14px;text-align:center;color:var(--t-suave);font-size:14px}

/* ---- Atajos a las categorias (burbujas) ---- */
.t-atajos{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.t-atajos::-webkit-scrollbar{display:none}
.t-atajo{display:flex;flex-direction:column;align-items:center;gap:8px;width:92px;flex:none;color:#fff;text-align:center}
.t-atajo-img{width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 6px 16px rgba(15,5,40,.3);transition:transform .15s,box-shadow .15s;border:3px solid rgba(255,255,255,.2)}
.t-atajo-img img{width:100%;height:100%;object-fit:cover}
.t-atajo-img span{font-family:var(--fuente-titulo);font-size:30px;color:var(--t-violeta)}
.t-atajo-nombre{font-size:13px;font-weight:700;line-height:1.2}
.t-atajo:hover .t-atajo-img{transform:translateY(-3px);box-shadow:0 10px 22px rgba(15,5,40,.4)}

/* ---- Marcas destacadas (logos) ---- */
.t-marcas-top{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:6px;scrollbar-width:none}
.t-marcas-top::-webkit-scrollbar{display:none}
.t-marcas-top a{flex:none;width:130px;height:64px;background:#fff;border-radius:14px;display:grid;place-items:center;padding:10px 14px;box-shadow:0 6px 16px rgba(15,5,40,.25);transition:transform .15s}
.t-marcas-top a:hover{transform:translateY(-2px)}
.t-marcas-top img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* ---- Lista: filtros a la izquierda, productos a la derecha ---- */
.t-cuerpo{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start}
.t-filtros{background:#fff;color:var(--t-texto);border-radius:var(--t-radio);padding:18px 16px;position:sticky;top:20px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.t-filtros-cabeza{display:none}
.t-filtro + .t-filtro{border-top:1px solid var(--t-borde);margin-top:14px;padding-top:14px}
.t-filtro h2{font:700 12px/1.2 var(--fuente);text-transform:uppercase;letter-spacing:.6px;color:var(--t-suave);margin:0 0 8px}
.t-filtro ul{list-style:none;margin:0;padding:0}
.t-filtro ul ul{padding-left:12px;border-left:2px solid var(--t-borde);margin:2px 0 4px 10px}
.t-filtro a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:10px;color:var(--t-texto);font-size:14px;line-height:1.25}
.t-filtro a:hover{background:#f6f2fd}
.t-filtro a.activo{background:#efe7fd;color:var(--t-violeta);font-weight:700}
.t-filtro small{color:var(--t-suave);font-size:12px;flex:none}
.t-lista-marcas{max-height:260px;overflow-y:auto;scrollbar-width:thin}
.t-check{justify-content:flex-start !important}
.t-check::before{content:"";width:18px;height:18px;border-radius:6px;border:2px solid #cfc6e2;flex:none;transition:.12s}
.t-check.activo::before{background:var(--t-violeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--t-violeta)}
.t-check span{flex:1}

.t-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.t-abrir-filtros{display:none;align-items:center;gap:6px;border:0;background:#fff;color:var(--t-texto);border-radius:999px;padding:0 16px;min-height:42px;font:700 13px/1 var(--fuente);text-transform:uppercase;cursor:pointer}
.t-abrir-filtros svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.t-activos{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.t-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;max-width:100%}
.t-chip span{font-size:16px;line-height:1;opacity:.8}
.t-chip:hover{background:rgba(255,255,255,.24)}
.t-chip-limpiar{background:transparent;border-style:dashed}
.t-orden{margin-left:auto}
.t-orden label{display:flex;align-items:center;gap:8px;color:#e9ddff;font-size:13px;font-weight:700}
.t-orden select{border:0;border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6480' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;color:var(--t-texto);font:600 14px/1.2 var(--fuente);padding:0 38px 0 16px;min-height:42px;-webkit-appearance:none;appearance:none;cursor:pointer}
.t-orden select:focus{outline:0;box-shadow:var(--foco-anillo)}

/* ---- Cuadricula ---- */
.t-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.t-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.t-grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.t-grid,.t-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* ---- Tarjeta ---- */
/* Quieta al pasar el mouse: ni se levanta ni la foto hace zoom (solo sus botones reaccionan) */
.t-card{position:relative;background:#fff;border-radius:var(--t-radio);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(0,0,0,.06);color:var(--t-texto)}
/* Marco blanco de 7px, como el de las tarjetas de premios (en PC y en el celular) */
.t-card-img{--t-marco:7px;position:relative;display:block;aspect-ratio:1/1;background:#fff;padding:var(--t-marco);line-height:0;overflow:hidden}
/* La foto entera (sin recortarla) y con sus CUATRO esquinas redondeadas,
   como la de las tarjetas de premios (11px). La foto mide lo que se ve de
   ella, centrada en el cuadro (y no un cuadro con la foto adentro y aire a
   los lados): asi el redondeo cae en las esquinas de la foto tambien si no
   es cuadrada. */
.t-card-img img{position:absolute;inset:var(--t-marco);margin:auto;width:auto;height:auto;max-width:calc(100% - 2 * var(--t-marco));max-height:calc(100% - 2 * var(--t-marco));border-radius:11px}
.t-card-agotado .t-card-img img{opacity:.55;filter:grayscale(.6)}
.t-sin-foto{display:block;width:100%;height:100%;border-radius:11px;background:#f4f1f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9bfdc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center/38% no-repeat}
.t-card-cuerpo{padding:4px 14px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.t-card-marca{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t-suave)}
.t-card-nombre{margin:0;font:700 15px/1.3 var(--fuente);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.t-card-nombre a{color:var(--t-texto)}
.t-card-nombre a::after{content:"";position:absolute;inset:0;z-index:1}   /* toda la tarjeta lleva a la ficha */
.t-card-nombre a:focus-visible{outline:none}
.t-card:focus-within{outline:3px solid #a78bfa;outline-offset:2px}
.t-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:auto}
.t-precio-ahora{font-family:var(--fuente-titulos);font-weight:600;font-size:18px;color:var(--t-violeta);white-space:nowrap}
.t-precio-antes{color:#9a93ad;font-size:13.5px;white-space:nowrap}

.t-badge{position:absolute;top:10px;left:10px;z-index:2;border-radius:999px;padding:4px 10px;font:800 12px/1.2 var(--fuente);letter-spacing:.3px;color:#fff;line-height:1.2}
.t-badge-oferta{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.t-badge-agotado{background:#4b4560}

@media (max-width:767px){
  .t-card-cuerpo{padding:2px 10px 12px}
  .t-card-nombre{font-size:13.5px}
  .t-precio-ahora{font-size:16px}
  .t-precio-antes{font-size:12px}
  .t-badge{top:8px;left:8px;font-size:11px;padding:3px 8px}
}

/* ---- Paginas, vacio, "Sobre ..." ---- */
.t-paginas{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:26px 0 6px}
.t-paginas a,.t-paginas span{min-width:42px;height:42px;border-radius:999px;display:grid;place-items:center;padding:0 12px;font-weight:700;font-size:14px}
.t-paginas a{background:#fff;color:var(--t-texto)}
.t-paginas a:hover{background:#efe7fd;color:var(--t-violeta)}
.t-pag-actual{background:linear-gradient(135deg,var(--t-violeta),var(--t-violeta-2));color:#fff}
.t-pag-salto{color:#cdbbf0}
.t-pag-flecha{font-size:22px !important}

.t-vacio{background:#fff;color:var(--t-texto);border-radius:var(--t-radio);padding:44px 20px;text-align:center}
.t-vacio-icono{line-height:1;margin-bottom:10px;color:var(--t-violeta)}
.t-vacio-icono svg{width:48px;height:48px}
.t-vacio h2{font-family:var(--fuente-titulos);font-size:20px;margin:0 0 6px}
.t-vacio p{color:var(--t-suave);margin:0 0 20px}

.t-sobre{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--t-radio);padding:18px 20px;margin-top:26px;color:#efe7ff}
.t-sobre h2{font-family:var(--fuente-titulos);font-size:17px;margin:0 0 8px;color:#fff}
.t-sobre-texto{font-size:14.5px;line-height:1.7}

/* ---- Botones ---- */
.t-boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--t-violeta),var(--t-violeta-2));color:#fff;font:700 15px/1.2 var(--fuente);text-transform:uppercase;letter-spacing:.3px;cursor:pointer;box-shadow:0 8px 20px rgba(109,40,217,.35);transition:transform .15s,filter .15s}
.t-boton:hover{filter:brightness(1.08);transform:translateY(-1px)}
.t-boton svg{width:20px;height:20px;fill:currentColor}
.t-boton-wa{background:#25d366;box-shadow:0 8px 20px rgba(37,211,102,.35)}

/* ---- Celular y tablet: los filtros salen de un costado ---- */
@media (max-width:1024px){
  .t-cuerpo{grid-template-columns:minmax(0,1fr)}
  .t-abrir-filtros{display:inline-flex}
  .t-filtros{position:fixed;top:0;bottom:0;left:0;width:min(86vw,340px);z-index:100004;border-radius:0 20px 20px 0;overflow-y:auto;transform:translateX(-105%);transition:transform .25s ease;padding-top:10px;overscroll-behavior:contain}
  .t-filtros.abierto{transform:none}
  .t-filtros-cabeza{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px;border-bottom:1px solid var(--t-borde);margin-bottom:12px;font-size:17px}
  .t-filtros-cerrar{border:0;background:#f3eefc;color:var(--t-texto);width:38px;height:38px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer}
  .t-velo{position:fixed;inset:0;background:rgba(10,3,25,.55);z-index:100003}
  .t-velo[hidden]{display:none}
  .t-orden label span{display:none}
}
@media (max-width:767px){
  .t-orden{margin-left:0}
  .t-barra{gap:8px}
  .t-activos{order:3;flex-basis:100%}
}

/* =====================================================================
   FICHA DEL PRODUCTO, con el diseno de la de Bagnnert (su producto.php)
   en los colores de Unepinos: el naranja de alli es el violeta de aqui, y
   su azul de titulos, tambien el violeta. Medidas tomadas de alli.
   ===================================================================== */
.t-solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Una sola tarjeta blanca. En el HTML van foto, datos y secciones (el
   orden del celular y de lectura); en PC la cuadricula pone la foto y las
   secciones a la izquierda y los datos a la derecha, a la vista al bajar. */
.t-ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:40px;align-items:start;
  background:#fff;color:var(--t-texto);border:1px solid var(--t-borde);border-radius:14px;padding:32px}
.t-galeria{grid-column:1;grid-row:1;min-width:0;display:flex;gap:14px}
.t-info{grid-column:2;grid-row:1 / span 2;min-width:0;position:sticky;top:calc(var(--cab-alto) + 12px)}
.t-secciones{grid-column:1;grid-row:2;margin-top:20px;display:flex;flex-direction:column;gap:10px}

/* ---- Galeria: miniaturas en columna y la foto grande (zoom al pasar el raton) ---- */
.t-galeria-minis{display:flex;flex-direction:column;gap:8px;flex:none;max-height:380px;overflow-y:auto;scrollbar-width:none;padding:1px}
.t-galeria-minis::-webkit-scrollbar{display:none}
.t-mini{flex:none;width:72px;height:72px;border-radius:8px;border:1.5px solid var(--t-borde);background:#fff;padding:4px;cursor:pointer;line-height:0;transition:border-color .15s}
.t-mini img{width:100%;height:100%;object-fit:contain}
.t-mini.activa{border-color:var(--t-violeta)}
.t-mini:hover{border-color:#c4b5fd}
.t-galeria-marco{position:relative;flex:1;min-width:0;border:1px solid var(--t-borde);border-radius:12px;overflow:hidden;background:#fff}
.t-galeria-fotos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:0}
.t-galeria-fotos::-webkit-scrollbar{display:none}
.t-galeria-fotos:focus-visible{box-shadow:inset 0 0 0 2px var(--t-violeta)}
.t-foto{flex:0 0 100%;scroll-snap-align:center;height:380px;margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;line-height:0}
.t-foto img{width:auto;height:auto;max-width:90%;max-height:360px;object-fit:contain;transition:transform .15s ease-out}
@media (hover:hover) and (pointer:fine){
  .t-foto[data-zoom]{cursor:crosshair}
  .t-foto[data-zoom].zoom img{transform:scale(2)}
}
.t-galeria-puntos{display:none}

/* ---- Marca, nombre y SKU ---- */
.t-info-marca{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:4px 12px;border-radius:20px;background:#f3eefc;color:var(--t-violeta);
  font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;text-decoration:none}
.t-info-marca span{width:7px;height:7px;border-radius:50%;background:var(--t-violeta-2);flex:none}
.t-info-marca:hover{background:#e9defc}
.t-info-nombre{margin:0 0 6px;font:400 20px/1.4 var(--fuente);letter-spacing:.2px;color:var(--t-texto);overflow-wrap:anywhere}
.t-info-sku{margin:0 0 16px;font-size:13px;color:#9a93ad}

/* ---- El precio en piezas: "S/" pequeno, enteros grandes, decimales arriba ----
   El contenedor dice el tamano de los enteros; lo demas va en em de el. */
.t-info-precio{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.t-piezas{display:inline-flex;align-items:baseline;white-space:nowrap;line-height:1;font-family:var(--fuente-titulos)}
.t-piezas-mon{font-size:.5em;font-weight:500;margin-right:.18em}
.t-piezas-ent{font-weight:600}
.t-piezas-dec{font-size:.52em;font-weight:500;align-self:flex-start;margin-left:.26em}
.t-piezas-ficha{font-size:32px;color:var(--t-texto)}
/* El anterior: "S/" entero y sin tachar, las cifras tachadas, todo en peso normal */
.t-info-antes{margin-top:12px;font-size:15px;color:#9a93ad}
.t-piezas-tachado .t-piezas-mon{font-size:1em;font-weight:400;margin-right:.25em}
.t-piezas-tachado .t-piezas-ent{font-weight:400;text-decoration:line-through}
.t-piezas-tachado .t-piezas-dec{font-size:.6em;font-weight:400;margin-left:.15em;text-decoration:line-through}
/* El descuento, como una etiqueta de precio: con la punta a la izquierda */
.t-etiqueta-dscto{display:inline-flex;align-items:center;height:1.6364em;padding:0 .5455em 0 1em;border-radius:0 .2727em .2727em 0;background:var(--t-rojo);color:#fff;
  font:700 13px/1 var(--fuente);clip-path:polygon(.6364em 0,100% 0,100% 100%,.6364em 100%,0 50%)}
.t-igv{margin:6px 0 18px;font-size:12px;color:#9a93ad}

/* ---- Cantidad, "Anadir al carrito" y el corazon ---- */
.t-comprar{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.t-ficha .t-cantidad{height:46px;border:2px solid var(--t-violeta);border-radius:30px;box-shadow:none;overflow:hidden}
.t-ficha .t-cantidad:has(input:focus){box-shadow:var(--foco-halo)}
.t-ficha .t-cantidad button{width:42px;border-radius:0;color:var(--t-violeta)}
.t-ficha .t-cantidad button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.t-ficha .t-cantidad button:hover:not(:disabled){background:#f3eefc;color:var(--t-violeta)}
.t-ficha .t-cantidad button:disabled{color:#cdbdf2}
.t-ficha .t-cantidad input{width:46px;font-size:16px}
.t-boton-anadir{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:999px;
  background:var(--t-violeta);color:#fff;font:400 16px/1 var(--fuente);text-transform:none;letter-spacing:0;cursor:pointer;transition:background .2s}
.t-boton-anadir:hover{background:#5b21b6}
.t-boton-anadir:focus-visible{outline:none;box-shadow:var(--foco-anillo)}
.t-boton-anadir svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-boton-anadir.cargando{opacity:.7;cursor:progress}
/* (con .t-ficha delante: el corazon de las tarjetas, .t-fav, va despues en este archivo) */
.t-ficha .t-fav-ficha{position:static;flex:none;width:46px;height:46px;border-radius:999px;border:1.5px solid var(--t-borde);background:#fff;box-shadow:none;color:#9a93ad}
.t-ficha .t-fav-ficha:hover{transform:none;border-color:var(--t-violeta);color:var(--t-rojo)}
.t-ficha .t-fav-ficha[aria-pressed="true"]{border-color:#fecdd3;color:var(--t-rojo)}
.t-agotado-nota{flex:1;margin:0;color:var(--t-suave);font-weight:700}

/* ---- "Ficha tecnica" y WhatsApp ---- */
.t-enlaces{display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:20px}
.t-enlaces:empty{display:none}
.t-enlace{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:400 13px/1.3 var(--fuente);text-transform:none;letter-spacing:0;color:var(--t-suave);text-decoration:none;cursor:pointer}
.t-enlace:hover{color:var(--t-violeta)}
.t-enlace svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-enlace-wa svg{fill:currentColor;stroke:none}

/* ---- Los datos: codigo, unidad, envio, disponibilidad ---- */
.t-datos{margin:0;border:1px solid var(--t-borde);border-radius:10px;overflow:hidden}
.t-datos > div{display:flex;padding:10px 16px;border-bottom:1px solid #f3f0f8;font-size:13px;line-height:1.4}
.t-datos > div:last-child{border-bottom:0}
.t-datos dt{width:140px;flex:none;color:#9a93ad}
.t-datos dd{margin:0;min-width:0;display:flex;align-items:center;gap:5px;color:var(--t-texto);font-weight:500;overflow-wrap:anywhere}
.t-datos dd svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-datos .t-dato-envio{color:var(--t-violeta)}
.t-datos .t-dato-si{color:var(--t-verde)}
.t-datos .t-dato-si svg,.t-datos .t-dato-no svg{stroke-width:2.5}
.t-datos .t-dato-no{color:var(--t-rojo)}

/* ---- Secciones plegadas (Descripcion, Especificaciones...): una abierta a la vez ---- */
.t-seccion{border:1px solid var(--t-borde);border-radius:10px;overflow:hidden;background:#fff;transition:box-shadow .35s ease}
.t-seccion summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;background:#f8f6fc;cursor:pointer;
  font:700 14px/1.3 var(--fuente);color:var(--t-violeta)}
.t-seccion summary::-webkit-details-marker{display:none}
.t-seccion summary:hover{background:#f3eefc}
.t-seccion summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--t-violeta)}
.t-seccion summary svg{width:18px;height:18px;flex:none;fill:none;stroke:#9a93ad;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.t-seccion[open] summary svg{transform:rotate(180deg)}
.t-seccion-cuerpo{padding:16px 18px;font-size:13px;line-height:1.8;color:var(--t-suave);overflow-wrap:anywhere}
.t-seccion-cuerpo p{margin:0}
/* Al llegar desde "Ficha tecnica": una sombra suave un momento, sin borde duro (no parece un error) */
.t-seccion.destacada{box-shadow:0 0 16px 3px rgba(109,40,217,.16)}
.t-tabla{width:100%;border-collapse:collapse}
.t-tabla th,.t-tabla td{padding:10px 16px;font-size:13px;line-height:1.35;text-align:left;vertical-align:middle}
.t-tabla tr:nth-child(odd){background:#f8f6fc}
.t-tabla th{width:40%;font-weight:600;color:var(--t-texto)}
.t-tabla td{color:var(--t-suave)}

/* ---- Productos relacionados ---- */
.t-relacionados{margin-top:32px}
.t-relacionados-titulo{margin:0 0 18px;padding-left:12px;border-left:4px solid var(--t-violeta-2);font:700 17px/1.3 var(--fuente);color:#fff}
.t-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.t-grid-5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.t-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.t-grid-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* ---- Celular: una columna; la foto se desliza con puntos debajo ---- */
@media (max-width:899px){
  .t-ficha{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:16px;padding:16px}
  .t-galeria,.t-info,.t-secciones{grid-column:1;grid-row:auto}
  .t-info{position:static}
  .t-galeria{flex-direction:column;gap:0}
  .t-galeria-minis{display:none}
  .t-foto{height:300px;padding:20px}
  .t-foto img{max-height:260px}
  .t-galeria-puntos{display:flex;justify-content:center;gap:2px;padding:8px 0 0}
  .t-punto{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:4px;border:0;background:none;cursor:pointer}
  .t-punto::before{content:"";width:8px;height:8px;border-radius:4px;background:#d0d5dd;transition:width .2s,background .2s}
  .t-punto.activo::before{width:20px;background:var(--t-violeta)}
  .t-secciones{margin-top:0}
  .t-ficha .t-cantidad{height:38px}
  .t-ficha .t-cantidad button{width:34px}
  .t-ficha .t-cantidad input{width:36px;font-size:14px}
  .t-boton-anadir{height:38px;padding:0 16px;font-size:13px}
  .t-ficha .t-fav-ficha{width:38px;height:38px}
  .t-datos dt{width:120px}
}

/* ---- Atajo [productos] (portada y paginas) ---- */
.t-atajo-productos{padding-top:10px;padding-bottom:10px}
.t-atajo-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.t-ver-todo{color:#fff;font-weight:700;font-size:14px;white-space:nowrap;border-bottom:2px solid rgba(255,255,255,.35);padding-bottom:2px}
.t-ver-todo:hover{border-color:#fff}

@media (prefers-reduced-motion:reduce){
  .t-foto img,.t-filtros{transition:none}
  .t-galeria-fotos{scroll-behavior:auto}
}

/* =====================================================================
   CARRITO Y FAVORITOS (etapa 2)
   ===================================================================== */

/* ---- Botones que faltaban ---- */
.t-boton-sec{background:#fff;color:var(--t-violeta);box-shadow:inset 0 0 0 2px #ddd0f7}
.t-boton-sec:hover{background:#f7f3fe;filter:none}
.t-boton-bloque{display:flex;width:100%}
.t-boton[aria-disabled="true"]{opacity:.5;pointer-events:none;box-shadow:none}
.t-boton.cargando,.t-card-agregar.cargando{opacity:.7;cursor:progress}

/* ---- El corazon ---- */
.t-fav{position:absolute;top:8px;right:8px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.94);box-shadow:0 3px 10px rgba(15,5,40,.14);
  display:grid;place-items:center;cursor:pointer;color:#8a82a0;transition:transform .15s,color .15s;padding:0}
.t-fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:fill .15s}
.t-fav:hover{color:var(--t-rojo);transform:scale(1.08)}
.t-fav[aria-pressed="true"]{color:var(--t-rojo)}
.t-fav[aria-pressed="true"] svg{fill:currentColor;animation:t-late .35s ease}
@keyframes t-late{40%{transform:scale(1.3)}}

/* ---- Agregar desde la tarjeta ---- */
.t-card-agregar{position:relative;z-index:2;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:0;border-radius:999px;
  background:#f3eefc;color:var(--t-violeta);font:800 13px/1 var(--fuente);text-transform:uppercase;letter-spacing:.3px;cursor:pointer;transition:background .15s,color .15s}
.t-card-agregar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-card-agregar:hover{background:linear-gradient(135deg,var(--t-violeta),var(--t-violeta-2));color:#fff}
.t-card-agregar-no{background:#f4f3f7;color:#9a93ad;cursor:default}
.t-card-agregar-no:hover{background:#f4f3f7;color:#9a93ad}
@media (max-width:767px){
  .t-fav{top:6px;right:6px;width:34px;height:34px}
  .t-fav svg{width:18px;height:18px}
  .t-card-agregar{min-height:36px;font-size:12px;margin-top:8px}
}

/* ---- Cantidad (- 1 +) ---- */
.t-cantidad{display:inline-flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 2px var(--t-borde);background:#fff;height:48px;flex:none}
.t-cantidad:has(input:focus){box-shadow:inset 0 0 0 1px var(--foco-borde),var(--foco-halo)}
.t-cantidad button{width:42px;height:100%;border:0;background:transparent;color:var(--t-texto);font:600 22px/1 var(--fuente);cursor:pointer;border-radius:999px;display:grid;place-items:center;padding:0}
.t-cantidad button:hover:not(:disabled){color:var(--t-violeta);background:#f3eefc}
.t-cantidad button:disabled{color:#cfc9dc;cursor:default}
.t-cantidad input{width:38px;border:0;outline:0;box-shadow:none;background:transparent;text-align:center;font:700 16px/1 var(--fuente);color:var(--t-texto);-moz-appearance:textfield;appearance:textfield;padding:0}
.t-cantidad input::-webkit-outer-spin-button,.t-cantidad input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.t-cantidad-chica{height:36px}
.t-cantidad-chica button{width:34px;font-size:18px}
.t-cantidad-chica input{width:30px;font-size:14px}

/* ---- Aviso flotante ---- */
.t-toast{position:fixed;left:50%;bottom:24px;z-index:100006;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);background:#1f1633;color:#fff;border-radius:14px;padding:12px 18px;
  font:600 14px/1.35 var(--fuente);box-shadow:0 12px 30px rgba(0,0,0,.35);transition:opacity .2s,transform .2s}
.t-toast.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.t-toast a{color:#c4b5fd;font-weight:800;white-space:nowrap;text-decoration:underline}
.t-toast-error{background:#9f1239}
@media (max-width:1024px){.t-toast{bottom:calc(var(--menu-movil-alto) + 14px)}}

/* ---- Cajon del carrito ---- */
/* Encima del menu inferior del celular y de los banners flotantes (99999) */
.t-cajon{position:fixed;inset:0;z-index:100005;color:var(--t-texto);font-family:var(--fuente)}
.t-cajon a{text-decoration:none}
.t-cajon[hidden]{display:none}
.t-cajon-fondo{position:absolute;inset:0;background:rgba(10,3,25,.55);opacity:0;transition:opacity .25s}
.t-cajon-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s ease;box-shadow:-10px 0 40px rgba(0,0,0,.25);border-radius:20px 0 0 20px;overflow:hidden}
.t-cajon.abierto .t-cajon-fondo{opacity:1}
.t-cajon.abierto .t-cajon-panel{transform:none}
.t-cajon-cab{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--t-borde)}
.t-cajon-titulo{margin:0;font:600 19px/1.2 var(--fuente-titulos)}
.t-cajon-cuenta{color:var(--t-suave);font-size:15px}
.t-cajon-x{width:40px;height:40px;border-radius:50%;border:0;background:#f3eefc;color:var(--t-texto);cursor:pointer;display:grid;place-items:center;padding:0}
.t-cajon-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.t-cajon-aviso{display:flex;align-items:center;gap:10px;margin:12px 18px 0;padding:10px 14px;border-radius:12px;background:#dcfce7;color:#166534;font-weight:700;font-size:14px}
.t-cajon-aviso[hidden]{display:none}
.t-cajon-aviso svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.t-cajon-lista{flex:1;overflow-y:auto;padding:6px 18px;overscroll-behavior:contain}
.t-cajon-cargando,.t-cajon-vacio{padding:40px 0;text-align:center;color:var(--t-suave)}
.t-cl{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--t-borde);transition:opacity .2s}
.t-cl:last-child{border-bottom:0}
.t-cl.ocupado{opacity:.5;pointer-events:none}
.t-cl-img{width:72px;height:72px;flex:none;border-radius:12px;border:1px solid var(--t-borde);padding:4px;display:grid;place-items:center;background:#fff}
.t-cl-img img{width:100%;height:100%;object-fit:contain}
.t-cl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.t-cl-nombre{font-weight:700;font-size:14px;line-height:1.3;color:var(--t-texto);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.t-cl-nombre:hover{color:var(--t-violeta)}
.t-cl-precio{font-size:13px;color:var(--t-suave)}
.t-cl-precio s{color:#aaa3bb}
.t-cl-aviso{margin:0;font-size:12.5px;font-weight:700;color:var(--t-naranja)}
.t-cl-agotado .t-cl-aviso,.t-cl-no_disponible .t-cl-aviso{color:var(--t-rojo)}
.t-cl-agotado .t-cl-img,.t-cl-no_disponible .t-cl-img{opacity:.5}
.t-cl-abajo{display:flex;align-items:center;gap:10px;margin-top:4px}
.t-cl-sub{margin-left:auto;font-family:var(--fuente-titulos);font-weight:600;font-size:15px;color:var(--t-violeta);white-space:nowrap}
.t-cl-quitar{width:34px;height:34px;flex:none;border:0;border-radius:50%;background:transparent;color:#9a93ad;cursor:pointer;display:grid;place-items:center;padding:0}
.t-cl-quitar:hover{background:#fff1f2;color:var(--t-rojo)}
.t-cl-quitar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-cl-abajo .t-cl-quitar:only-child{margin-left:auto}
.t-cajon-pie{padding:14px 18px 18px;border-top:1px solid var(--t-borde);display:grid;gap:10px;background:#fcfbfe}
.t-cajon-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.t-cajon-total[hidden]{display:none}
.t-cajon-total b{font:600 22px/1 var(--fuente-titulos);color:var(--t-texto)}
.t-cajon-nota{margin:-4px 0 2px;color:var(--t-suave);font-size:12.5px}
.t-cajon-pie .t-boton{min-height:46px;font-size:14px}
.t-cajon-pie [hidden]{display:none}
@media (prefers-reduced-motion:reduce){.t-cajon-panel,.t-cajon-fondo,.t-toast{transition:none}}

/* ---- Pagina del carrito ---- */
.t-carrito{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.t-carrito-lista{background:#fff;color:var(--t-texto);border-radius:var(--t-radio);padding:6px 22px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.t-linea{display:grid;grid-template-columns:96px minmax(0,1fr) auto 110px;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--t-borde);transition:opacity .25s}
.t-linea.ocupado{opacity:.55;pointer-events:none}
.t-linea.saliendo{opacity:0}
.t-linea-img{width:96px;height:96px;border-radius:14px;border:1px solid var(--t-borde);padding:6px;display:grid;place-items:center;background:#fff;line-height:0}
.t-linea-img img{width:100%;height:100%;object-fit:contain}
.t-linea-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.t-linea-nombre{font-weight:700;font-size:15.5px;line-height:1.3;color:var(--t-texto);overflow-wrap:anywhere}
a.t-linea-nombre:hover{color:var(--t-violeta)}
.t-linea-precio{color:var(--t-suave);font-size:14px}
.t-linea-precio s{color:#aaa3bb;font-size:13px}
.t-linea-aviso{margin:2px 0 0;font-size:13px;font-weight:700;color:var(--t-naranja)}
.t-linea-aviso[hidden]{display:none}
.t-linea-agotado .t-linea-aviso,.t-linea-no_disponible .t-linea-aviso{color:var(--t-rojo)}
.t-linea-agotado .t-linea-img,.t-linea-no_disponible .t-linea-img{opacity:.45;filter:grayscale(.6)}
.t-linea-cant{display:flex;flex-direction:column;align-items:center;gap:6px}
.t-linea-cant [hidden]{display:none}
.t-linea-quitar{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:#9a93ad;font:700 12.5px/1 var(--fuente);text-transform:uppercase;cursor:pointer;padding:6px 8px;border-radius:8px;min-height:0}
.t-linea-quitar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-linea-quitar:hover{color:var(--t-rojo);background:#fff1f2}
.t-linea-subtotal{text-align:right;font:600 18px/1.2 var(--fuente-titulos);color:var(--t-texto);white-space:nowrap}
.t-carrito-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0 12px}
.t-volver{color:var(--t-violeta);font-weight:700;font-size:14px}
.t-volver:hover{text-decoration:underline}
.t-link-peligro{border:0;background:none;color:#9a93ad;font:700 13px/1 var(--fuente);cursor:pointer;padding:8px;min-height:0;text-transform:none}
.t-link-peligro:hover{color:var(--t-rojo)}

.t-resumen{position:sticky;top:calc(var(--cab-alto) + 16px);background:#fff;color:var(--t-texto);border-radius:var(--t-radio);padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.08);display:grid;gap:12px}
.t-resumen-titulo{margin:0;font:600 19px/1.2 var(--fuente-titulos)}
.t-resumen-filas{margin:0;display:grid;gap:10px}
.t-resumen-filas > div{display:flex;justify-content:space-between;gap:12px;font-size:14.5px}
.t-resumen-filas [hidden]{display:none}
.t-resumen-filas dt{color:#3f3950}
.t-resumen-filas dd{margin:0;font-weight:700;text-align:right}
.t-resumen-ahorro dd{color:var(--t-verde)}
.t-resumen-suave{color:var(--t-suave);font-weight:600 !important}
.t-resumen-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--t-borde);padding-top:14px;font-weight:800}
.t-resumen-total b{font:600 26px/1 var(--fuente-titulos);color:var(--t-violeta)}
.t-resumen-nota{margin:-2px 0 0;font-size:13px;color:var(--t-suave);text-align:center}
.t-resumen-cuenta{margin:4px 0 0;padding:12px 14px;border-radius:12px;background:#f8f5fd;font-size:13.5px;color:#3f3950;line-height:1.5}
.t-resumen-cuenta a{color:var(--t-violeta);font-weight:800}
.t-resumen .t-boton-wa{font-size:14px}

.t-vacio-ico{width:74px;height:74px;border-radius:50%;background:#f3eefc;display:grid;place-items:center;margin:0 auto 14px;color:var(--t-violeta)}
.t-vacio-ico svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t-vacio-botones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.t-aviso-suave{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;color:#efe7ff;font-size:14px;margin:0 0 16px}
.t-aviso-suave a{color:#fff;font-weight:800;text-decoration:underline}
.t-card.saliendo{opacity:0;transform:scale(.96);transition:opacity .25s,transform .25s}

@media (max-width:1024px){
  .t-carrito{grid-template-columns:minmax(0,1fr)}
  .t-resumen{position:static}
}
@media (max-width:640px){
  .t-carrito-lista{padding:2px 14px}
  .t-linea{grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"img info info" "img cant sub";gap:8px 12px;padding:14px 0}
  .t-linea-img{grid-area:img;width:76px;height:76px;align-self:start}
  .t-linea-info{grid-area:info}
  .t-linea-cant{grid-area:cant;flex-direction:row;align-items:center;justify-self:start}
  .t-linea-quitar span{display:none}
  .t-linea-subtotal{grid-area:sub;font-size:16px}
  .t-resumen{padding:18px}
}