/* ==========================================================================
   Tienda de kits (kits.html)
   Tres kits, un carrito que se guarda en el navegador y el pedido sale por
   WhatsApp. El carrito es un <dialog>: Esc lo cierra y el foco se queda
   dentro mientras está abierto.
   ========================================================================== */

/* La placa del hero ya viene sin fondo: sin tarjeta gris, flota sola */
.product-core-image{background:none;border-radius:0;overflow:visible}
.product-core-image img{mix-blend-mode:normal;filter:drop-shadow(0 28px 30px #0b2a6e33)}

.tienda-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tienda-kit{
  position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;
  border:1px solid #dde7f8;border-radius:20px;overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.tienda-kit:hover{transform:translateY(-5px);border-color:#bcd0f7;box-shadow:0 26px 44px -26px #1e48c866}
.tienda-kit.destacado{border-color:#2b5ce6;box-shadow:0 0 0 1px #2b5ce6}
.tienda-kit.destacado:hover{box-shadow:0 0 0 1px #2b5ce6,0 26px 44px -26px #1e48c880}

.tienda-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#d6e5ff 0%,#eef4ff 55%,#f7faff 100%)}
.tienda-foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.tienda-foto.abajo img{object-position:50% 100%}
.tienda-kit:hover .tienda-foto img{transform:scale(1.04)}
.tienda-sello{
  position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border-radius:999px;background:#fff;color:#1e48c8;font-size:.74rem;font-weight:700;letter-spacing:.01em;
  box-shadow:0 6px 16px -8px #1e48c870;
}

.tienda-cuerpo{display:flex;flex-direction:column;gap:12px;flex:1;padding:22px 22px 20px}
.tienda-etiqueta{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#2b5ce6}
.tienda-kit h3{margin:0;font-size:1.28rem;line-height:1.22;letter-spacing:-.02em;color:#12234c;text-wrap:balance}
.tienda-kit p{margin:0;font-size:.93rem;line-height:1.65;color:#53617e}
.tienda-incluye{display:grid;gap:8px;margin:2px 0 0;padding:0;list-style:none;font-size:.88rem;line-height:1.45;color:#34466a}
.tienda-incluye li{display:flex;gap:9px;align-items:flex-start}
.tienda-incluye i{flex:none;margin-top:2px;font-size:1rem;color:#2b5ce6}

.tienda-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid #edf2fb}
.tienda-precio{font-size:1.05rem;font-weight:700;color:#12234c;line-height:1.2}
.tienda-precio small{display:block;margin-top:3px;font-size:.74rem;font-weight:500;color:#65748f}
.tienda-agregar{flex:none;white-space:nowrap}
.tienda-agregar.listo{background:#0f7a3f;box-shadow:0 10px 24px -12px #0f7a3f99}

.tienda-nota{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:.88rem;color:#53617e}
.tienda-nota i{font-size:1.2rem;color:#0f7a3f}

/* ---------- botón flotante del carrito ---------- */
.carrito-boton{
  position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:10px;
  padding:13px 18px 13px 16px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#2b5ce6,#1e48c8);color:#fff;font:600 .95rem/1 var(--font-body,inherit);
  box-shadow:0 18px 34px -14px #1e48c8cc;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
  animation:carrito-entra .5s cubic-bezier(.16,1,.3,1) both;
}
.carrito-boton:hover{transform:translateY(-2px);box-shadow:0 22px 38px -14px #1e48c8e6}
.carrito-boton:focus-visible{outline:3px solid #9bbcff;outline-offset:3px}
.carrito-boton>i{font-size:1.3rem}
.carrito-cuenta{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:#fff;color:#1e48c8;font-size:.8rem;font-weight:800}
.carrito-boton.salta{animation:carrito-salta .5s cubic-bezier(.16,1,.3,1)}
@keyframes carrito-entra{from{opacity:0;transform:translateY(18px) scale(.9)}}
@keyframes carrito-salta{40%{transform:scale(1.12)}}

/* ---------- panel del carrito ---------- */
.carrito{
  width:min(430px,100vw);height:100dvh;max-width:none;max-height:none;margin:0 0 0 auto;padding:0;border:0;
  background:#fff;color:#12234c;box-shadow:-24px 0 60px -30px #0b1a3a99;
}
.carrito[open]{display:flex;flex-direction:column;animation:carrito-abre .45s cubic-bezier(.16,1,.3,1)}
.carrito::backdrop{background:#0b1a3a59;backdrop-filter:blur(3px)}
@keyframes carrito-abre{from{transform:translateX(100%)}}
.carrito-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 22px 16px;border-bottom:1px solid #edf2fb}
.carrito-cabeza h2{margin:0;font-size:1.3rem;letter-spacing:-.02em}
.carrito-cerrar{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:#f1f5fd;color:#34466a;font-size:1.2rem;cursor:pointer}
.carrito-cerrar:hover{background:#e3ebfb}
.carrito-lista{flex:1;overflow:auto;margin:0;padding:10px 22px;list-style:none}
.carrito-item{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #f0f4fb}
.carrito-item img{width:64px;height:48px;object-fit:cover;border-radius:10px;background:#eef4ff}
.carrito-item strong{display:block;font-size:.92rem;line-height:1.3}
.carrito-item small{display:block;margin-top:3px;font-size:.78rem;color:#65748f}
.carrito-controles{display:flex;align-items:center;gap:6px}
.carrito-paso{display:grid;place-items:center;width:32px;height:32px;border:1px solid #dde7f8;border-radius:10px;background:#fff;color:#1e48c8;font-size:1rem;cursor:pointer}
.carrito-paso:hover{background:#f1f5fd}
.carrito-cant{min-width:22px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.carrito-quitar{display:block;margin-top:6px;padding:0;border:0;background:none;color:#65748f;font-size:.76rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.carrito-quitar:hover{color:#b42318}
.carrito-vacio{display:grid;justify-items:center;gap:10px;padding:48px 22px;text-align:center;color:#53617e}
.carrito-vacio i{font-size:2.4rem;color:#9bb3e4}
.carrito-pie{display:grid;gap:12px;padding:18px 22px 22px;border-top:1px solid #edf2fb;background:#f8fbff}
.carrito-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.carrito-total span:last-child{font-size:1.15rem}
.carrito-aviso{margin:0;font-size:.8rem;line-height:1.55;color:#53617e}
.carrito-pedir{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 18px;border-radius:14px;
  background:#0f7a3f;color:#fff;font-weight:700;font-size:1rem;text-decoration:none;
  box-shadow:0 14px 28px -14px #0f7a3fb3;transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s;
}
.carrito-pedir:hover{background:#0c6835;transform:translateY(-1px)}
.carrito-pedir:focus-visible{outline:3px solid #7fd4a4;outline-offset:3px}
.carrito-pedir>i{font-size:1.35rem}
.carrito-pedir[aria-disabled="true"]{background:#9aa8bf;box-shadow:none;pointer-events:none}
.carrito-vaciar{justify-self:center;padding:0;border:0;background:none;color:#65748f;font-size:.8rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Lema junto al nombre: «Construye.», «Dale vida.», «Llévalo al aula.» */
.tienda-lema{color:#2b5ce6;font-weight:600}
/* La placa sin fondo se ve entera, sin recortar */
.tienda-foto.contener img{object-fit:contain;padding:7% 9%;filter:drop-shadow(0 16px 18px #1e48c833)}

/* ---------- paquete Build + Core ---------- */
.tienda-paquete{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto;align-items:center;gap:28px;margin-top:22px;
  padding:22px 26px;border:1px solid #c9d9f8;border-radius:20px;
  background:linear-gradient(120deg,#eef4ff 0%,#f7faff 60%,#e8f0ff 100%);
}
.tienda-paquete-fotos{display:flex;align-items:center;gap:8px}
.tienda-paquete-fotos img{width:calc(50% - 14px);height:auto;aspect-ratio:4/3;object-fit:contain}
.tienda-paquete-fotos span{font-size:1.6rem;font-weight:700;color:#2b5ce6}
.tienda-paquete-texto{display:grid;gap:8px}
.tienda-paquete h3{margin:0;font-size:1.3rem;letter-spacing:-.02em;color:#12234c}
.tienda-paquete p{margin:0;font-size:.93rem;line-height:1.6;color:#53617e}
.tienda-paquete-compra{display:grid;gap:12px;justify-items:end;text-align:right}
.tienda-paquete .tienda-precio{font-size:1.35rem}
.tienda-ahorro{display:block;margin-top:4px;font-size:.8rem;font-weight:700;color:#0f7a3f}
.tienda-ahorro s{margin-right:6px;font-weight:500;color:#8390a6}

/* placa sola: una sola foto, más chica */
.tienda-placa{background:#fff;border-color:#dde7f8}
.tienda-placa .tienda-paquete-fotos{justify-content:center}
.tienda-placa .tienda-paquete-fotos img{width:min(100%,300px);filter:drop-shadow(0 14px 16px #1e48c833)}

/* hidden manda: si no, los display de arriba lo anulan */
.carrito-boton[hidden],.carrito [hidden]{display:none!important}

@media (max-width:1000px){
  .tienda-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tienda-paquete{grid-template-columns:1fr 1fr}
  .tienda-paquete-compra{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center;justify-items:start;text-align:left}
}
@media (max-width:680px){
  .tienda-grid{grid-template-columns:1fr}
  /* precio arriba y el botón a todo lo ancho: en fila no cabían */
  .tienda-pie{flex-direction:column;align-items:stretch}
  .tienda-agregar{width:100%;justify-content:center}
  .tienda-paquete{grid-template-columns:1fr;padding:20px}
  .tienda-paquete-compra{grid-template-columns:1fr}
  .carrito-boton{right:14px;bottom:14px}
}
@media (hover:none){.tienda-kit:hover,.tienda-kit:hover .tienda-foto img{transform:none}}
@media (prefers-reduced-motion:reduce){
  .tienda-kit,.tienda-foto img,.carrito-boton,.carrito[open]{transition:none;animation:none}
}