/* iMAGEN Taller Creativo — tienda en línea (estructura tipo Amazon). Primero celular. */

:root {
  --t-azul: #221d4a;
  --t-azul-2: #2e2866;
  --t-naranja: #e8650f;
  --t-naranja-2: #c9530a;
  --t-amarillo: #ffd23f;
  --t-verde-wa: #1f9d55;
  --t-fondo: #eaeded;
  --t-blanco: #ffffff;
  --t-texto: #0f1111;
  --t-suave: #565959;
  --t-borde: #d5d9d9;
  --t-enlace: #2162a1;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.45; background: var(--t-fondo); color: var(--t-texto); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; }

/* ---------- cabecera ---------- */
.t-cabecera { position: sticky; top: 0; z-index: 20; }
.t-barra { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.55rem 0.9rem; background: var(--t-azul); color: #fff; }
.t-marca { display: flex; flex-direction: column; text-decoration: none; line-height: 1; padding: 0.2rem 0.3rem; border: 1px solid transparent; border-radius: 3px; }
.t-marca:hover { border-color: #fff; }
.t-marca-nombre { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.06em; }
.t-marca-linea { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; margin-top: 0.2rem; }
.t-marca-linea b { background: var(--t-naranja); padding: 0.05rem 0.3rem; border-radius: 999px; }
.t-buscador { order: 3; flex: 1 1 100%; display: flex; height: 42px; border-radius: 8px; overflow: hidden; background: #fff; }
.t-buscador:focus-within { box-shadow: 0 0 0 3px var(--t-naranja); }
.t-buscador input { flex: 1; min-width: 0; border: 0; padding: 0 0.8rem; font: inherit; font-size: 1rem; outline: none; color: var(--t-texto); }
.t-buscador button { width: 50px; border: 0; background: var(--t-naranja); color: #fff; cursor: pointer; display: grid; place-items: center; }
.t-buscador button:hover { background: var(--t-naranja-2); }
.t-carrito-icono { margin-left: auto; position: relative; display: flex; align-items: flex-end; gap: 0.2rem; text-decoration: none; padding: 0.2rem 0.4rem; border: 1px solid transparent; border-radius: 3px; }
.t-carrito-icono:hover { border-color: #fff; }
.t-carrito-numero { position: absolute; top: -2px; left: 16px; min-width: 20px; text-align: center; font-weight: 900; color: var(--t-amarillo); font-size: 1rem; }
.t-carrito-texto { font-weight: 800; font-size: 0.9rem; padding-bottom: 2px; }
@media (min-width: 760px) {
  .t-buscador { order: 0; flex: 1 1 auto; max-width: 820px; }
  .t-carrito-icono { margin-left: 0; }
}
.t-subbarra { display: flex; gap: 0.2rem; overflow-x: auto; padding: 0.35rem 0.6rem; background: var(--t-azul-2); scrollbar-width: none; }
.t-subbarra::-webkit-scrollbar { display: none; }
.t-subbarra a { flex: 0 0 auto; color: #fff; text-decoration: none; font-size: 0.88rem; font-weight: 600; padding: 0.25rem 0.55rem; border: 1px solid transparent; border-radius: 3px; }
.t-subbarra a:hover { border-color: #fff; }

.t-contenido { max-width: 1500px; margin: 0 auto; padding: 0.75rem 0.6rem 2.5rem; }

/* ---------- botones ---------- */
.t-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
.t-boton-carrito { background: var(--t-amarillo); border-color: #f2c200; color: var(--t-texto); }
.t-boton-carrito:hover { background: #f7c400; }
.t-boton-comprar { background: var(--t-naranja); color: #fff; }
.t-boton-comprar:hover { background: var(--t-naranja-2); }
.t-boton-wa { background: var(--t-verde-wa); color: #fff; }
.t-boton-wa:hover { background: #188547; }
.t-boton-blanco { background: #fff; color: var(--t-azul); }
.t-boton-borde { background: #fff; border-color: var(--t-borde); color: var(--t-texto); }
.t-boton-borde:hover { background: #f7fafa; }
.t-boton-chico { min-height: 32px; padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.t-boton-ancho { width: 100%; margin-top: 0.5rem; }
.t-enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--t-enlace); cursor: pointer; text-decoration: none; }
.t-enlace:hover { text-decoration: underline; color: var(--t-naranja-2); }

/* ---------- avisos ---------- */
.t-aviso-ok, .t-aviso-error, .t-aviso-info { padding: 0.65rem 0.9rem; border-radius: 8px; margin: 0 0 0.8rem; font-weight: 600; }
.t-aviso-ok { background: #e7f6ec; color: #1e6b3a; }
.t-aviso-error { background: #fdecee; color: #a00d25; }
.t-aviso-info { background: #fff4e5; color: #8a4b0f; }

/* ---------- portada y cajas ---------- */
.t-portada { margin: 0 0 0.75rem; padding: 2rem 1.3rem; border-radius: 8px; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(232, 101, 15, 0.6), transparent 45%), linear-gradient(135deg, var(--t-azul), #3a2f7a); }
.t-portada-pre { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #ffd2b3; }
.t-portada h1 { margin: 0 0 0.6rem; font-size: clamp(1.9rem, 6vw, 3.2rem); font-weight: 900; }
.t-portada-texto { margin: 0 0 1.2rem; max-width: 34rem; font-size: 1.05rem; color: #e6e3f5; }

.t-caja { background: var(--t-blanco); border-radius: 8px; padding: 1rem; margin: 0 0 0.75rem; }
.t-caja h2 { margin: 0 0 0.75rem; font-size: 1.3rem; font-weight: 800; }
.t-caja-color { background: #f3e3d6; }
.t-caja-titulo { display: flex; align-items: baseline; gap: 1rem; }
.t-caja-titulo a { color: var(--t-enlace); font-size: 0.9rem; text-decoration: none; }
.t-titulo { font-size: 1.5rem; margin: 0 0 0.9rem; }
.t-migas { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--t-suave); }
.t-migas a { text-decoration: none; }
.t-migas a:hover { text-decoration: underline; }
.t-vacio { padding: 1.5rem 0.5rem; text-align: center; color: var(--t-suave); }
.t-vacio a { color: var(--t-enlace); }

/* «Emprende con iMAGEN»: categorías con foto */
.t-mosaico { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.75rem; overflow-x: auto; scrollbar-width: thin; }
.t-mosaico li { flex: 0 0 150px; }
@media (min-width: 900px) { .t-mosaico li { flex: 1 1 0; max-width: 220px; } }
.t-mosaico a { display: block; text-decoration: none; text-align: center; }
.t-mosaico-foto { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #f3f3f3; }
.t-mosaico-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.t-mosaico a:hover img { transform: scale(1.04); }
.t-mosaico-nombre { display: block; margin-top: 0.4rem; font-weight: 600; }

/* filas horizontales y grilla */
.t-fila { list-style: none; margin: 0; padding: 0 0 0.3rem; display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.t-fila > .t-tarjeta { flex: 0 0 170px; scroll-snap-align: start; }
@media (min-width: 760px) { .t-fila > .t-tarjeta { flex-basis: 220px; } }
.t-grilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .t-grilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .t-grilla { grid-template-columns: repeat(5, 1fr); } }

.t-tarjeta { display: flex; flex-direction: column; background: #fff; border-radius: 6px; padding: 0.5rem; border: 1px solid #eee; }
.t-tarjeta-enlace { flex: 1; text-decoration: none; display: flex; flex-direction: column; gap: 0.25rem; }
.t-tarjeta-enlace:hover h3 { color: var(--t-naranja-2); }
.t-tarjeta-foto { position: relative; aspect-ratio: 1; background: #f7f7f7; border-radius: 4px; overflow: hidden; }
.t-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.t-tarjeta-agotada .t-tarjeta-foto img { filter: grayscale(0.7); opacity: 0.75; }
.t-tarjeta h3 { margin: 0.3rem 0 0; font-size: 0.95rem; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-tarjeta-accion { margin-top: 0.5rem; width: 100%; }
.t-tarjeta-accion .t-boton { width: 100%; }
.t-sin-foto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px; font-weight: 900; letter-spacing: 0.1em; color: #cfcfcf; font-size: 1.2rem; }
.t-cinta { position: absolute; top: 0.4rem; left: 0.4rem; padding: 0.2rem 0.55rem; border-radius: 3px; background: #cc0c39; color: #fff; font-size: 0.72rem; font-weight: 800; }

/* precios estilo Amazon */
.t-precio { margin: 0; color: var(--t-texto); }
.t-precio s { color: var(--t-suave); font-size: 0.8rem; margin-left: 0.25rem; }
.t-monto { font-size: 1.55rem; font-weight: 500; white-space: nowrap; }
.t-monto sup { font-size: 0.55em; top: -0.65em; position: relative; vertical-align: baseline; }
.t-desde { font-size: 0.55em; color: var(--t-suave); margin-right: 0.2rem; }
.t-consultar { font-weight: 700; color: var(--t-azul); }
.t-precio-grande .t-monto { font-size: 2rem; }
.t-antes { margin: 0.1rem 0; color: var(--t-suave); font-size: 0.9rem; }
.t-estado { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--t-suave); }
.t-estado-ok { color: #007600; }
.t-estado-pocas { color: #b12704; }
.t-estado-agotado { color: #b12704; }
.t-estado-grande { font-size: 1.1rem; margin: 0.3rem 0; }

/* ---------- ficha ---------- */
.t-ficha { display: grid; gap: 1rem; background: #fff; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
@media (min-width: 980px) { .t-ficha { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; } }
.t-galeria-principal { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #f7f7f7; }
.t-galeria-principal img { width: 100%; height: 100%; object-fit: contain; }
.t-miniaturas { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; gap: 0.4rem; overflow-x: auto; }
.t-miniatura { padding: 0; border: 2px solid var(--t-borde); border-radius: 6px; overflow: hidden; background: none; cursor: pointer; width: 64px; height: 64px; }
.t-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.t-miniatura.activa { border-color: var(--t-naranja); box-shadow: 0 0 0 2px rgba(232, 101, 15, 0.3); }
.t-ficha-texto h1 { font-size: clamp(1.35rem, 4vw, 1.8rem); font-weight: 500; margin: 0; }
.t-ficha-texto hr { border: 0; border-top: 1px solid #e7e7e7; margin: 0.7rem 0; }
.t-ficha-resumen { margin: 0.4rem 0 0; color: var(--t-suave); }
.t-personalizable { margin: 0.6rem 0; padding: 0.55rem 0.8rem; border-radius: 6px; background: #fff3ea; color: var(--t-naranja-2); font-weight: 700; }
.t-descripcion h2 { font-size: 1rem; margin: 0.8rem 0 0.3rem; }
.t-descripcion ul { margin: 0; padding-left: 1.2rem; }
.t-descripcion li { margin: 0.3rem 0; }
.t-compra { border: 1px solid var(--t-borde); border-radius: 8px; padding: 1rem; }
.t-compra-retiro, .t-compra-nota { font-size: 0.85rem; color: var(--t-suave); margin: 0.4rem 0; }
.t-compra-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.t-compra-form label { display: flex; flex-direction: column; gap: 0.2rem; font-weight: 600; font-size: 0.9rem; }
.t-compra-form label span { font-weight: 400; color: var(--t-suave); }
.t-compra-form select, .t-compra-form input, .t-formulario input, .t-formulario textarea, .t-cantidad select {
  font: inherit; padding: 0.45rem 0.6rem; border: 1px solid #888c8c; border-radius: 8px; background: #f0f2f2; }
.t-compra-form select { max-width: 110px; }
.t-enlace-wa { display: block; margin-top: 0.7rem; color: var(--t-enlace); font-size: 0.9rem; text-decoration: none; }
.t-compra-garantias { list-style: none; margin: 0.9rem 0 0; padding: 0.7rem 0 0; border-top: 1px solid #eee; font-size: 0.85rem; color: var(--t-suave); display: grid; gap: 0.25rem; }

/* ---------- carrito y pedido ---------- */
.t-carrito { display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .t-carrito { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.t-carrito .t-caja { margin: 0; }
.t-lineas { list-style: none; margin: 0; padding: 0; }
.t-linea { display: grid; grid-template-columns: 90px 1fr auto; gap: 0.75rem; padding: 0.9rem 0; border-top: 1px solid #eee; }
.t-linea-foto { width: 90px; height: 90px; border-radius: 6px; overflow: hidden; background: #f7f7f7; }
.t-linea-foto img { width: 100%; height: 100%; object-fit: cover; }
.t-linea-nombre { font-weight: 600; text-decoration: none; font-size: 1.02rem; }
.t-linea-detalle { margin: 0.15rem 0; font-size: 0.85rem; color: var(--t-suave); }
.t-linea-acciones { display: flex; gap: 0.9rem; align-items: center; margin-top: 0.3rem; flex-wrap: wrap; font-size: 0.9rem; }
.t-cantidad label { display: flex; gap: 0.3rem; align-items: center; }
.t-linea-total { margin: 0; font-weight: 800; font-size: 1.05rem; }
.t-resumen-compra h2 { font-size: 1.15rem; }
.t-subtotal { font-size: 1.1rem; margin: 0.4rem 0; }
.t-resumen-lineas { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.t-resumen-lineas li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.92rem; }
.t-resumen-lineas small { color: var(--t-suave); }
.t-formulario { display: flex; flex-direction: column; gap: 0.75rem; }
.t-formulario fieldset { border: 1px solid #e3e3e3; border-radius: 8px; padding: 0.8rem; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.t-formulario legend { font-weight: 800; padding: 0 0.3rem; }
.t-formulario label { display: flex; flex-direction: column; gap: 0.2rem; font-weight: 600; }
.t-formulario label > span { font-weight: 400; color: var(--t-suave); }
.t-opcion { flex-direction: row !important; align-items: flex-start; gap: 0.5rem !important; font-weight: 500 !important; cursor: pointer; }
.t-opcion input { margin-top: 0.25rem; }
.t-opcion small { color: var(--t-suave); }
.t-codigo { font-family: ui-monospace, Consolas, monospace; background: #f3f3f3; padding: 0.1rem 0.4rem; border-radius: 4px; }
.t-estado-pedido { display: inline-block; margin: 0 0 1rem; padding: 0.4rem 0.8rem; border-radius: 999px; font-weight: 800; background: #fff4e5; color: #8a4b0f; }
.t-estado-pedido-pagado, .t-estado-pedido-listo, .t-estado-pedido-entregado { background: #e7f6ec; color: #1e6b3a; }
.t-estado-pedido-cancelado { background: #f3f3f3; color: var(--t-suave); }
.t-pasos { list-style: none; display: flex; margin: 0 0 1.2rem; padding: 0; counter-reset: paso; }
.t-pasos li { flex: 1; position: relative; text-align: center; font-size: 0.78rem; color: var(--t-suave); padding-top: 2rem; }
.t-pasos li::before { counter-increment: paso; content: counter(paso); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: #e3e3e3; font-weight: 800; color: #fff; z-index: 1; }
.t-pasos li::after { content: ""; position: absolute; top: 0.8rem; left: -50%; width: 100%; height: 3px; background: #e3e3e3; }
.t-pasos li:first-child::after { display: none; }
.t-pasos li.hecho { color: var(--t-texto); font-weight: 700; }
.t-pasos li.hecho::before, .t-pasos li.hecho::after { background: #1f9d55; }
.t-pago { border: 2px solid var(--t-naranja); border-radius: 8px; padding: 0.9rem; margin: 0 0 1rem; }
.t-pago h2 { margin-top: 0; }
.t-cuenta { white-space: pre-wrap; font: inherit; font-weight: 700; background: #f7f7f7; padding: 0.7rem; border-radius: 6px; margin: 0.5rem 0; }

/* ---------- empresas y pie ---------- */
.t-empresas { margin: 0 0 0.75rem; padding: 1.5rem 1.2rem; border-radius: 8px; background: #fff; border-top: 5px solid var(--t-naranja); }
.t-empresas h2 { margin: 0 0 0.5rem; font-size: 1.35rem; }
.t-empresas p { margin: 0 0 1rem; color: var(--t-suave); }
.t-niveles { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.t-niveles li { padding: 0.8rem; border-radius: 8px; background: #f7f7f7; text-align: center; }
.t-niveles b { display: block; font-size: 1.2rem; color: var(--t-azul); }
.t-niveles span { display: block; font-weight: 800; color: var(--t-naranja-2); }
.t-pie { padding: 2rem 1rem; text-align: center; font-size: 0.85rem; color: #c9c5e0; background: var(--t-azul); }
.t-pie p { margin: 0.2rem 0; }
.t-pie-marca { font-size: 1.05rem; color: #fff; }

/* ---------- P9C: personalizar, carrito lateral, datos del pedido ---------- */
.t-personalizar { border: 1px solid var(--t-borde); border-radius: 8px; padding: 0.6rem; background: #fffaf5; display: flex; flex-direction: column; gap: 0.5rem; }
.t-compra-form .t-personalizar-casilla { flex-direction: row; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-weight: 500; }
.t-compra-form .t-personalizar-casilla input { width: 20px; height: 20px; margin: 0.1rem 0 0; accent-color: var(--t-naranja); flex: none; }
.t-compra-form .t-personalizar-casilla small { color: var(--t-suave); font-weight: 400; }
.t-recargo { display: inline-block; padding: 0 0.4rem; border-radius: 999px; background: var(--t-naranja); color: #fff !important; font-weight: 800 !important; font-size: 0.8rem; }
.t-personalizar:not(.activo) .t-personalizar-texto { display: none; }
.t-compra-total { margin: 0; font-size: 1.05rem; }
.t-boton[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.t-lateral-fondo { position: fixed; inset: 0; background: rgba(15, 17, 17, 0.45); z-index: 40; }
.t-lateral { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: #fff; z-index: 41; display: flex; flex-direction: column; box-shadow: -6px 0 24px rgba(0, 0, 0, 0.2); animation: t-entra 0.2s ease-out; }
@keyframes t-entra { from { transform: translateX(100%); } to { transform: none; } }
.t-lateral[hidden], .t-lateral-fondo[hidden] { display: none; }
.t-lateral-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; background: var(--t-azul); color: #fff; }
.t-lateral-cabeza h2 { margin: 0; font-size: 1.15rem; }
.t-lateral-cerrar { border: 0; background: none; color: #fff; font-size: 1.3rem; cursor: pointer; padding: 0.2rem 0.4rem; }
.t-lateral-cuerpo { flex: 1; overflow-y: auto; padding: 1rem; }
.t-lateral-lineas { list-style: none; margin: 0; padding: 0; }
.t-lateral-linea { display: grid; grid-template-columns: 72px 1fr auto; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid #eee; }
.t-lateral-foto { width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: #f7f7f7; }
.t-lateral-foto img { width: 100%; height: 100%; object-fit: cover; }
.t-lateral-foto .t-sin-foto { min-height: 72px; font-size: 0.7rem; }
.t-lateral-texto { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.9rem; }
.t-lateral-texto a { text-decoration: none; }
.t-lateral-texto small { color: var(--t-suave); }
.t-lateral-texto form { margin: 0; }
.t-lateral-subtotal { font-size: 0.95rem; }
.t-lateral-pie { position: sticky; bottom: -1rem; background: #fff; padding: 0.8rem 0 1rem; border-top: 1px solid #eee; margin-top: 0.5rem; }
body.t-lateral-abierto { overflow: hidden; }
.t-carrito-icono.t-salta { animation: t-salta 0.5s; }
@keyframes t-salta { 30% { transform: scale(1.25); } 60% { transform: scale(0.95); } }

.t-carrito-principal { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.t-campos-fila { display: grid; gap: 0.55rem; }
@media (min-width: 620px) { .t-campos-fila { grid-template-columns: 1fr 1fr; } }
.t-formulario select { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid #888c8c; border-radius: 8px; background: #f0f2f2; }
.t-domicilio, .t-factura { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.7rem; border-radius: 8px; background: #f7f8f8; }
.t-domicilio[hidden], .t-factura[hidden] { display: none; }
.t-resumen-fila { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0.3rem 0; font-size: 0.95rem; }
.t-resumen-fila[hidden] { display: none; }
@media (min-width: 900px) { .t-resumen-compra { position: sticky; top: 0.75rem; } }