/* La vitrina publica de la tienda. Movil primero: este enlace viaja por WhatsApp.
   Todo valor sale de tokens.css. --marca (color_primario de la tienda) lo pone la pagina inline.

   REGLA: --marca pinta fondos, bordes e iconos, NUNCA texto sobre blanco. Hay tiendas amarillas.
   Las barras usan --marca-oscuro, que es el derivado con contraste garantizado.

   2026-11-11: disposicion de comercio. Antes el encabezado con el logo grande se comia la
   primera pantalla y solo cabian dos productos; ahora son dos barras delgadas y en el telefono
   se ven cuatro productos sin deslizar. */

/* Los derivados se recalculan AQUI, junto al --marca que pone la pagina. Si se dejan solo en
   :root se congelan con el color por defecto y todas las tiendas salen con la misma barra. */
.tw, .cat-fondo {
    --marca-oscuro: color-mix(in srgb, var(--marca) 34%, #0A1020);
    --marca-suave: color-mix(in srgb, var(--marca) 10%, #fff);
}
/* El respaldo de tokens.css vive en :root y esta declaracion de aqui le gana: sin repetirlo,
   un WebView de Android viejo computa un valor invalido y la barra sale TRANSPARENTE, con el
   texto blanco sobre fondo casi blanco. */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .tw, .cat-fondo { --marca-oscuro: #0E1A3A; --marca-suave: #EFF4FF; }
}

.tw {
    min-height: 100vh;
    background: var(--fondo);
    font-family: var(--fuente);
    color: var(--tinta);
    font-size: var(--t-md);
}

/* ====================== barra superior ====================== */
.tw-barra { background: var(--marca-oscuro); color: #fff; }
.tw-barra-in {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; gap: var(--e3); padding: 9px var(--e3);
}
.tw-tienda {
    display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
    color: #fff; text-decoration: none; min-width: 0;
}
.tw-tienda img, .tw-inicial {
    width: 34px; height: 34px; border-radius: var(--r1); object-fit: contain;
    background: #fff; flex: 0 0 auto;
}
.tw-inicial {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); color: #fff; font-weight: 800; font-size: var(--t-lg);
}
.tw-tienda-txt { display: flex; flex-direction: column; min-width: 0; }
.tw-tienda-txt .n { font-weight: 700; font-size: var(--t-lg); line-height: 1.15; white-space: nowrap; }
.tw-tienda-txt .s {
    font-size: var(--t-xs); color: rgba(255,255,255,.72); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}

.tw-buscar {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
    background: #fff; border-radius: var(--r1); padding: 0 10px; height: var(--alto-control);
}
.tw-buscar i { color: var(--tinta-3); font-size: var(--t-lg); }
.tw-buscar input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: var(--t-md); color: var(--tinta);
}
.tw-limpiar { border: 0; background: none; cursor: pointer; color: var(--tinta-3); padding: 2px 4px; }

.tw-carrito {
    display: flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto;
    border: 0; background: none; cursor: pointer; color: #fff;
    font-family: inherit; font-weight: 700; font-size: var(--t-md);
    /* Minimo de toque: los iconos vienen de un CDN de terceros y si no carga, el <i> mide cero
       y el boton del carrito desaparece. Con esto sigue siendo tocable aunque falte la fuente. */
    min-width: 44px; min-height: 36px;
}
.tw-carrito i { font-size: var(--t-xl); }
.tw-carrito .b {
    background: var(--cta); color: #fff; border-radius: 999px; min-width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--t-xs); font-weight: 800; padding: 0 6px;
}

/* En telefono el buscador NO cabe en la misma fila que el nombre y el carrito: se aplasta a dos
   centimetros y no se puede escribir. Baja a su propia fila, a todo el ancho. */
@media (max-width: 639px) {
    .tw-barra-in { flex-wrap: wrap; row-gap: 8px; }
    .tw-tienda { flex: 1 1 auto; }
    .tw-tienda-txt .s { display: none; }
    .tw-buscar { flex: 1 0 100%; order: 3; }
}

/* ====================== barra de categorias ======================
   Fondo CLARO con texto oscuro, no el color de la tienda. Se probo con el color crudo y no hay
   mezcla que sirva: con una tienda amarilla o blanca, el texto blanco sobre la barra da 2.6:1
   contra un minimo de 4.5:1, y las categorias no se leen. El color de la tienda sigue presente
   en la barra de arriba (su derivado oscuro) y en el subrayado de la categoria activa. */
.tw-barra2 { background: var(--superficie); border-bottom: 1px solid var(--linea); }
.tw-barra2-in {
    max-width: 1280px; margin: 0 auto; display: flex; gap: 2px;
    padding: 0 var(--e3); overflow-x: auto; scrollbar-width: none;
}
.tw-barra2-in::-webkit-scrollbar { display: none; }
.tw-cat {
    border: 0; background: none; cursor: pointer; font-family: inherit;
    padding: 10px 12px; font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
    color: var(--tinta-2); border-bottom: 3px solid transparent;
}
.tw-cat:hover { color: var(--tinta); }
.tw-cat.on { color: var(--tinta); font-weight: 700; border-bottom-color: var(--marca-oscuro); }
.tw-cat-rebajas { margin-left: auto; color: var(--error); font-weight: 700; }
.tw-cat-rebajas.on { color: var(--error); border-bottom-color: var(--error); }

/* ====================== migas ====================== */
.tw-migas {
    max-width: 1280px; margin: 0 auto; padding: 9px var(--e3) 4px;
    font-size: var(--t-xs); color: var(--tinta-3);
    display: flex; gap: 6px; align-items: center;
}
.tw-migas a { color: var(--tinta-3); text-decoration: none; }
.tw-migas b { color: var(--tinta-2); font-weight: 600; }

/* ====================== cuerpo ====================== */
.tw-cuerpo {
    max-width: 1280px; margin: 0 auto; padding: 0 var(--e3) var(--e6);
    display: grid; grid-template-columns: 1fr; gap: var(--e5); align-items: start;
}
@media (min-width: 1000px) {
    .tw-cuerpo { grid-template-columns: 230px minmax(0, 1fr); }
    .tw-barra-in, .tw-barra2-in, .tw-migas, .tw-cuerpo { padding-left: var(--e4); padding-right: var(--e4); }
}

/* ---- barra de filtros ---- */
.tw-filtros {
    background: var(--superficie); border: 1px solid var(--linea);
    border-radius: var(--r2); padding: var(--e4);
}
.tw-filtros-top { display: none; }
.tw-fgrupo { padding: var(--e3) 0; border-bottom: 1px solid var(--linea); }
.tw-fgrupo:first-of-type { padding-top: 0; }
.tw-fgrupo:last-of-type { border-bottom: 0; }
.tw-ftitulo { font-size: var(--t-sm); font-weight: 700; margin-bottom: 9px; }
.tw-fop {
    display: flex; align-items: center; gap: 8px; padding: 3px 0;
    font-size: var(--t-sm); color: var(--tinta-2); cursor: pointer;
}
.tw-fop input { accent-color: var(--marca); width: 15px; height: 15px; flex: 0 0 auto; }
.tw-fop .c { margin-left: auto; font-size: var(--t-xs); color: var(--tinta-3); }
.tw-rango { display: flex; gap: 6px; align-items: center; }
.tw-rango input {
    width: 100%; min-width: 0; border: 1px solid var(--linea-fuerte); border-radius: var(--r1);
    padding: 7px 8px; font-size: var(--t-sm); font-family: inherit; outline: 0; color: inherit;
}
.tw-rango input:focus { border-color: var(--marca); }

.tw-tallas { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-talla {
    border: 1px solid var(--linea-fuerte); background: #fff; border-radius: var(--r1);
    padding: 5px 10px; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
    cursor: pointer; font-family: inherit;
}
.tw-talla.on { border-color: var(--marca-oscuro); background: var(--marca-suave); color: var(--marca-oscuro); }
.tw-colores { display: flex; flex-wrap: wrap; gap: 9px; }
.tw-color {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linea-fuerte);
}
.tw-color.on { box-shadow: 0 0 0 2px var(--marca); }

.tw-aplicar { display: none; }

/* ---- encabezado de resultados ---- */
.tw-encabezado {
    display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3);
}
.tw-encabezado h1 { font-size: var(--t-xl); font-weight: 700; margin: 0; }
.tw-encabezado .c { color: var(--tinta-3); font-size: var(--t-sm); }
.tw-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
.tw-btn-filtros {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit;
    border: 1px solid var(--linea-fuerte); background: #fff; border-radius: var(--r1);
    padding: 7px 12px; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
.tw-orden { display: flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--tinta-2); }
.tw-orden select {
    border: 1px solid var(--linea-fuerte); border-radius: var(--r1); padding: 7px 9px;
    font-size: var(--t-sm); font-family: inherit; background: #fff; color: inherit; outline: 0;
}
@media (min-width: 1000px) { .tw-btn-filtros { display: none; } }
@media (max-width: 999px)  { .tw-orden span { display: none; } }

/* ---- rejilla ---- */
.tw-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
@media (min-width: 560px)  { .tw-rejilla { grid-template-columns: repeat(3, 1fr); gap: var(--e3); } }
@media (min-width: 1000px) { .tw-rejilla { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

.tw-tarjeta {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r2);
    overflow: hidden; text-decoration: none; color: inherit; position: relative;
    display: flex; flex-direction: column; transition: box-shadow .12s ease, border-color .12s ease;
}
.tw-tarjeta:hover { box-shadow: var(--s2); border-color: var(--linea-fuerte); }
.tw-foto { aspect-ratio: 1; width: 100%; object-fit: cover; background: #fff; display: block; }
.tw-foto-vacia {
    display: flex; align-items: center; justify-content: center;
    background: #EEF2F8; color: #B6C0D4; font-size: 2rem;
}
.tw-tarjeta.agotado .tw-foto { filter: grayscale(.8); opacity: .72; }

.tw-cinta {
    position: absolute; top: 8px; left: 8px; z-index: 1;
    background: var(--error); color: #fff; font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: var(--r1);
}
.tw-cinta.pronto  { background: var(--marca-oscuro); }
.tw-cinta.agotado { background: #64748B; }

.tw-info { padding: 9px var(--e3) var(--e3); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.tw-nombre {
    font-size: var(--t-md); font-weight: 500; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* El precio en una sola linea: antes se partia en dos y se leia "L" arriba y la cifra abajo. */
.tw-precio { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.tw-precio .a {
    font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1;
    white-space: nowrap;
}
.tw-precio .a small { font-size: var(--t-sm); font-weight: 600; vertical-align: super; margin-right: 2px; }
.tw-precio .v { font-size: var(--t-sm); color: var(--tinta-3); text-decoration: line-through; white-space: nowrap; }
.tw-ahorro {
    align-self: flex-start; font-size: var(--t-xs); font-weight: 700;
    color: var(--exito); background: var(--exito-suave); border-radius: var(--r1); padding: 2px 7px;
}
.tw-quedan { font-size: var(--t-xs); color: var(--alerta); font-weight: 600; }
.tw-mini { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; padding-top: 5px; }
.tw-mini span {
    font-size: 11px; font-weight: 600; color: var(--tinta-2);
    border: 1px solid var(--linea); border-radius: 4px; padding: 2px 6px;
}

.tw-vacio { text-align: center; color: var(--tinta-3); padding: 56px var(--e4); }
.tw-vacio i { font-size: 2rem; }
.tw-vacio p { margin: var(--e3) 0; }
.tw-btn-claro {
    border: 1px solid var(--linea-fuerte); background: #fff; color: var(--tinta);
    border-radius: var(--r1); padding: 9px 16px; font-weight: 700; font-size: var(--t-sm);
    cursor: pointer; font-family: inherit;
}

/* ---- en telefono los filtros son una hoja que entra desde la izquierda ---- */
@media (max-width: 999px) {
    .tw-filtros {
        position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 330px);
        border-radius: 0; border: 0; overflow-y: auto; padding-bottom: 88px;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .tw-filtros.abierto { transform: none; }
    .tw-filtros-top {
        display: flex; align-items: center; justify-content: space-between;
        font-weight: 800; font-size: var(--t-lg); padding-bottom: var(--e3);
        border-bottom: 1px solid var(--linea); margin-bottom: var(--e2);
    }
    .tw-filtros-top button { border: 0; background: none; cursor: pointer; font-size: var(--t-lg); color: var(--tinta-2); }
    .tw-aplicar {
        display: block; position: fixed; bottom: 0; left: 0; width: min(86vw, 330px);
        background: var(--cta); color: #fff; border: 0; cursor: pointer; font-family: inherit;
        padding: 15px; font-size: var(--t-md); font-weight: 700;
    }
    .tw-telon { position: fixed; inset: 0; z-index: 55; background: rgba(15,23,42,.45); }
}

/* ====================== pagina de producto ====================== */
.pp-cuerpo { max-width: 760px; margin: 0 auto; padding: var(--e3); }
.pp-volver {
    display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2);
    text-decoration: none; font-weight: 600; font-size: var(--t-sm); margin: 6px 0;
}
.pp-tarjeta {
    background: var(--superficie); border-radius: var(--r3); overflow: hidden;
    border: 1px solid var(--linea); box-shadow: var(--s1);
}
.pp-foto { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; display: block; cursor: zoom-in; }
.pp-miniaturas { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.pp-miniatura {
    width: 58px; height: 58px; border-radius: var(--r2); object-fit: cover; cursor: pointer;
    border: 2px solid transparent; flex: 0 0 auto;
}
.pp-miniatura.activa { border-color: var(--marca); }
.pp-info { padding: var(--e4); }
.pp-nombre { font-size: var(--t-2xl); font-weight: 800; line-height: 1.2; }
.pp-precio { font-size: var(--t-2xl); font-weight: 800; margin: 6px 0; }
.pp-descripcion { color: var(--tinta-2); font-size: var(--t-md); white-space: pre-line; margin-top: 8px; line-height: 1.5; }
.pp-agotado { color: var(--error); font-weight: 700; margin-top: 10px; }
.pp-cantidad { display: flex; align-items: center; gap: 0; margin: var(--e4) 0 4px; }
.pp-cantidad button {
    width: 42px; height: 42px; border: 1px solid var(--linea-fuerte); background: #fff;
    cursor: pointer; font-size: var(--t-xl); font-weight: 700; font-family: inherit; color: var(--tinta);
}
.pp-cantidad button:first-child { border-radius: var(--r2) 0 0 var(--r2); }
.pp-cantidad button:last-child { border-radius: 0 var(--r2) var(--r2) 0; }
.pp-cantidad span {
    min-width: 54px; text-align: center; height: 42px; line-height: 42px; font-weight: 700;
    border-top: 1px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea-fuerte);
}

.btn-marca {
    width: 100%; background: var(--marca); color: #fff; border: 0; cursor: pointer;
    border-radius: var(--r3); padding: 14px; font-size: var(--t-lg); font-weight: 700;
    font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-marca:disabled { background: var(--linea-fuerte); cursor: default; }
.btn-claro {
    width: 100%; background: #fff; border: 1px solid var(--marca); cursor: pointer;
    border-radius: var(--r3); padding: 13px; font-size: var(--t-md); font-weight: 700;
    font-family: inherit; color: var(--tinta);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-claro i { color: var(--marca); }

/* fondo heredado que todavia usan ProductoPublico, Checkout y MiPedido */
.cat-fondo {
    min-height: 100vh; background: var(--fondo); font-family: var(--fuente);
    color: var(--tinta); padding-bottom: 96px;
}
.cat-foto-vacia {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    background: #EEF2F8; color: #B6C0D4; font-size: 2rem;
}
.cat-precio-antes {
    color: var(--tinta-3); text-decoration: line-through; font-weight: 500;
    font-size: var(--t-sm); margin-right: 6px;
}

/* ====================== checkout ====================== */
.ck-cuerpo { max-width: 640px; margin: 0 auto; padding: var(--e3); display: flex; flex-direction: column; gap: var(--e3); }
.ck-panel { background: var(--superficie); border-radius: var(--r3); padding: var(--e4); border: 1px solid var(--linea); box-shadow: var(--s1); }
.ck-titulo { font-weight: 800; font-size: var(--t-lg); margin-bottom: 10px; }
.ck-linea { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.ck-linea:last-child { border-bottom: none; }
.ck-linea img, .ck-linea .sinfoto {
    width: 52px; height: 52px; border-radius: var(--r2); object-fit: cover; background: #EEF2F8;
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #B6C0D4;
}
.ck-linea-info { flex: 1; min-width: 0; }
.ck-linea-nombre { font-weight: 600; font-size: var(--t-md); line-height: 1.25; }
.ck-linea-precio { color: var(--tinta-2); font-size: var(--t-sm); }
.ck-mas-menos { display: flex; align-items: center; gap: 0; }
.ck-mas-menos button {
    width: 30px; height: 30px; border: 1px solid var(--linea-fuerte); background: #fff;
    cursor: pointer; font-weight: 700; font-family: inherit; border-radius: var(--r1); color: var(--tinta);
}
.ck-mas-menos span { min-width: 34px; text-align: center; font-weight: 700; font-size: var(--t-md); }
.ck-quitar { border: none; background: none; color: var(--error); cursor: pointer; font-size: var(--t-lg); padding: 4px; }

.ck-entregas { display: flex; flex-direction: column; gap: 8px; }
.ck-entrega {
    display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--r2); padding: var(--e3); cursor: pointer; font-weight: 600; font-size: var(--t-md);
}
.ck-entrega.activa { border-color: var(--marca); background: var(--marca-suave); }
.ck-entrega i { color: var(--marca); font-size: var(--t-xl); }
.ck-entrega .costo { margin-left: auto; font-weight: 700; }

/* Aviso de que el envio todavia no tiene precio. Dicho al escoger la encomienda, no al final:
   el cliente tiene que enterarse ANTES de mandar el pedido, no despues. */
.ck-nota {
    display: flex; gap: 8px; margin-top: 10px; padding: 10px var(--e3);
    background: var(--marca-suave); border-radius: var(--r2);
    font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.45;
}
.ck-nota i { color: var(--marca); font-size: var(--t-lg); flex-shrink: 0; }
.ck-totales .fila .porcotizar { font-style: italic; }

.ck-campo { margin-bottom: 10px; }
.ck-campo label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); margin-bottom: 4px; }
.ck-campo input, .ck-campo textarea {
    width: 100%; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r2); padding: 11px 12px;
    font-size: var(--t-lg); font-family: inherit; outline: none; box-sizing: border-box;
    background: #fff; color: inherit;
}
.ck-campo input:focus, .ck-campo textarea:focus { border-color: var(--marca); }

.ck-totales { font-size: var(--t-md); }
.ck-totales .fila { display: flex; justify-content: space-between; padding: 3px 0; color: var(--tinta-2); }
.ck-totales .fila.total {
    font-weight: 800; font-size: var(--t-xl); color: var(--tinta);
    border-top: 1px solid var(--linea); margin-top: 6px; padding-top: 8px;
}
.ck-error {
    background: var(--error-suave); border: 1px solid #FECACA; color: var(--error);
    border-radius: var(--r2); padding: var(--e3); font-size: var(--t-md);
}
.ck-aviso { color: var(--tinta-2); font-size: var(--t-sm); text-align: center; }
.ck-aviso-bien { color: var(--exito); font-size: var(--t-sm); font-weight: 600; }
.ck-mayorista { color: var(--exito); font-weight: 700; font-size: var(--t-xs); margin-left: 6px; }

.ck-exito { text-align: center; padding: 28px var(--e4); }
.ck-exito .circulo {
    width: 76px; height: 76px; border-radius: 999px; margin: 0 auto 12px;
    background: var(--exito-suave); color: var(--exito);
    display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
}

/* El consejo de dejarse el icono en el telefono, al cerrar el pedido. Va en gris y debajo
   del boton: es util, pero no compite con "Ver mi pedido". 2026-11-11. */
.ck-guardar {
    margin: 1.4rem 0 0;
    font-size: .88rem;
    color: var(--tinta-2);
    line-height: 1.5;
}

/* ====================== MiPedido (seguimiento) ====================== */
.mp-estado {
    display: inline-block; border-radius: 999px; padding: 6px 16px; font-weight: 800;
    font-size: var(--t-lg); background: var(--marca-suave); color: var(--tinta);
    border: 1.5px solid var(--marca);
}
.mp-estado.bueno { background: var(--exito-suave); border-color: var(--exito); }
.mp-estado.malo  { background: var(--error-suave); border-color: var(--error); }
.mp-vence {
    margin-top: 10px; font-size: var(--t-sm); color: var(--tinta-2);
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mp-vence i { color: var(--marca); }

.mp-linea-tiempo { display: flex; flex-direction: column; gap: 0; }
.mp-evento { display: flex; gap: var(--e3); padding: 0 0 var(--e4); position: relative; }
.mp-evento:last-child { padding-bottom: 0; }
.mp-evento .punto {
    width: 12px; height: 12px; border-radius: 999px; background: var(--marca);
    flex: 0 0 auto; margin-top: 4px; position: relative; z-index: 1;
}
.mp-evento:not(:last-child)::before {
    content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--linea);
}
.mp-evento-accion { font-weight: 700; font-size: var(--t-md); }
.mp-evento-fecha { color: var(--tinta-3); font-size: var(--t-xs); }
.mp-evento-nota { color: var(--tinta-2); font-size: var(--t-sm); margin-top: 2px; }
.mp-evento-foto { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r2); margin-top: 6px; cursor: zoom-in; }

.mp-cuenta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1.5px solid var(--linea); border-radius: var(--r2); padding: 10px var(--e3); margin-bottom: 8px;
}
.mp-cuenta-banco { font-weight: 700; font-size: var(--t-md); }
.mp-cuenta-tipo { color: var(--tinta-3); font-weight: 500; font-size: var(--t-xs); margin-left: 4px; }
.mp-cuenta-numero { font-size: var(--t-lg); font-weight: 700; letter-spacing: .5px; color: var(--tinta); }
.mp-cuenta-titular { color: var(--tinta-2); font-size: var(--t-xs); }
.mp-copiar {
    border: 1px solid var(--marca); background: #fff; color: var(--tinta); cursor: pointer;
    border-radius: var(--r2); padding: 8px 12px; font-weight: 700; font-size: var(--t-sm);
    font-family: inherit; white-space: nowrap;
}
.mp-copiar i { color: var(--marca); }
.mp-select {
    width: 100%; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r2); padding: 11px 12px;
    font-size: var(--t-lg); font-family: inherit; background: #fff; color: inherit; outline: none;
}
.mp-efectivo {
    margin-top: var(--e3); background: var(--fondo); border-radius: var(--r2); padding: var(--e3);
    font-size: var(--t-md); color: var(--tinta-2); white-space: pre-line;
}

/* mayorista y "disponible pronto" en la pagina de producto */
.pp-mayorista {
    display: inline-block; margin: 4px 0 8px; padding: 4px 10px; border-radius: 999px;
    background: var(--exito-suave); color: var(--exito); font-weight: 700; font-size: var(--t-sm);
}
.pp-pronto {
    display: inline-flex; align-items: center; gap: 6px; margin: 8px 0; padding: 8px 14px;
    border-radius: var(--r2); background: var(--marca-suave); color: var(--marca-oscuro); font-weight: 700;
}

/* ====================== ficha de producto (disposicion de comercio) ======================
   Tres columnas en computadora: galeria, lo que es el producto, y la caja de compra pegada.
   En telefono se apilan y la caja se vuelve barra fija abajo: el boton de agregar tiene que
   estar siempre a la vista, que es de donde sale la venta. */
.tw-espacio { flex: 1; }

.tw-ficha {
    max-width: 1280px; margin: 0 auto; padding: 0 var(--e3) var(--e6);
    display: grid; grid-template-columns: 1fr; gap: var(--e4); align-items: start;
}
@media (min-width: 1000px) {
    .tw-ficha {
        grid-template-columns: 76px 400px minmax(0, 1fr) 316px;
        gap: var(--e5); padding-left: var(--e4); padding-right: var(--e4);
    }
    /* Columna fija para cada cosa. Sin esto, un producto con UNA sola foto no dibuja la tira de
       miniaturas y la foto grande se corre a la columna de 76 px: salia del tamano de una ficha. */
    .tw-tiras { grid-column: 1; grid-row: 1; }
    .tw-grande { grid-column: 2; grid-row: 1; }
    .tw-detalle { grid-column: 3; grid-row: 1; }
    .tw-caja { grid-column: 4; grid-row: 1; }
}

/* En una columna el orden tiene que ser explicito en los CUATRO: con order solo en la tira,
   las miniaturas se iban al final de la pagina, debajo de las lineas de confianza. */
.tw-grande  { order: 0; }
.tw-tiras   { display: flex; gap: 8px; order: 1; overflow-x: auto; }
.tw-detalle { order: 2; }
.tw-caja    { order: 3; }
@media (min-width: 1000px) { .tw-tiras { flex-direction: column; order: 0; overflow: visible; } }
.tw-tira {
    width: 68px; height: 68px; flex: 0 0 68px; padding: 0; cursor: pointer;
    border: 1px solid var(--linea); border-radius: var(--r1); overflow: hidden; background: #fff;
}
.tw-tira.on { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.tw-tira img { width: 100%; height: 100%; object-fit: cover; }

.tw-grande {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r2);
    overflow: hidden;
}
/* contain, no cover: una foto que no sea cuadrada se ve COMPLETA, no recortada */
.tw-grande img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; cursor: zoom-in; display: block; }

.tw-detalle h1 { font-size: var(--t-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.tw-sub { color: var(--tinta-3); font-size: var(--t-sm); margin-top: 4px; display: flex; gap: 5px; flex-wrap: wrap; }
.tw-sep { height: 1px; background: var(--linea); margin: var(--e4) 0; }
.tw-bloque { margin-bottom: var(--e4); }
.tw-bloque h3 {
    font-size: var(--t-sm); font-weight: 700; margin: 0 0 8px;
    display: flex; gap: 7px; align-items: baseline;
}
.tw-bloque h3 .elegido { font-weight: 500; color: var(--tinta-2); }
.tw-desc { color: var(--tinta-2); line-height: 1.6; font-size: var(--t-md); white-space: pre-line; margin: 0; }
.tw-talla.no, .tw-color.no { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.tw-color.no { text-decoration: none; }

.tw-mayorista {
    display: flex; gap: 10px; align-items: flex-start; background: var(--cta-suave);
    border: 1px solid #F7D3B2; border-radius: var(--r2); padding: var(--e3);
    font-size: var(--t-sm); color: #7C3A09;
}
.tw-mayorista i { font-size: var(--t-xl); }
.tw-mayorista b { display: block; font-size: var(--t-md); margin-bottom: 2px; }

/* ---- caja de compra ---- */
.tw-caja {
    background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r2);
    padding: var(--e4); box-shadow: var(--s1);
}
@media (min-width: 1000px) { .tw-caja { position: sticky; top: var(--e3); } }
.tw-caja .pr { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tw-caja .pr .a { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.025em; line-height: 1; white-space: nowrap; }
.tw-caja .pr .a small { font-size: var(--t-md); font-weight: 600; vertical-align: super; margin-right: 2px; }
.tw-caja .pr .v { font-size: var(--t-md); color: var(--tinta-3); text-decoration: line-through; }
.tw-caja .tw-ahorro { margin-top: 8px; }
.tw-hay { color: var(--exito); font-weight: 700; font-size: var(--t-md); margin-top: 10px; }
.tw-sin { color: var(--error); font-weight: 700; font-size: var(--t-md); margin-top: 10px; }
.tw-pronto {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px;
    border-radius: var(--r2); background: var(--marca-suave); color: var(--marca-oscuro); font-weight: 700;
}
.tw-nota { font-size: var(--t-sm); color: var(--tinta-2); margin: 4px 0 0; }
.tw-nota.aviso { color: var(--alerta); font-weight: 600; margin: 10px 0 0; }
.tw-caja-tit { font-size: var(--t-sm); font-weight: 700; margin: var(--e3) 0 5px; }
.tw-cantidad {
    display: flex; align-items: center; border: 1px solid var(--linea-fuerte);
    border-radius: var(--r1); width: fit-content; overflow: hidden;
}
.tw-cantidad button {
    width: 38px; height: 38px; border: 0; background: #F7F9FC; cursor: pointer;
    font-size: var(--t-xl); color: var(--tinta-2); font-family: inherit;
}
.tw-cantidad span { width: 48px; text-align: center; font-weight: 700; }

.tw-btn-cta, .tw-btn-marca {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 42px;
    margin-top: var(--e3); border: 0; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: var(--t-md);
}
.tw-btn-cta { background: var(--cta); color: #fff; }
.tw-btn-cta:hover:not(:disabled) { background: var(--cta-fuerte); }
.tw-btn-cta:disabled { background: var(--linea-fuerte); color: #fff; cursor: default; }
.tw-btn-marca { background: var(--marca-oscuro); color: #fff; }

.tw-confianza {
    list-style: none; margin: var(--e4) 0 0; padding: var(--e3) 0 0;
    border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 9px;
}
.tw-confianza li { display: flex; gap: 9px; font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.35; }
.tw-confianza .i { color: var(--exito); font-weight: 800; }

/* Cantidad y boton de agregar: en computadora es un bloque mas de la caja; en telefono se queda
   pegado abajo mientras se lee la ficha. Es la misma marca, no hay botones duplicados. */
.tw-comprar { margin-top: var(--e3); }
.tw-comprar .tw-cantidad { margin-bottom: var(--e2); }

@media (max-width: 999px) {
    .tw-caja { border: 0; border-radius: 0; box-shadow: none; padding: var(--e3) 0 0; }
    /* fixed y no sticky: sticky solo pega dentro de su padre, y .tw-caja es el ULTIMO bloque
       de la pagina, asi que el boton no se veia mientras el cliente leia la ficha. */
    .tw { padding-bottom: 76px; }
    .tw-comprar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0;
        background: #fff; border-top: 1px solid var(--linea); padding: 9px var(--e3);
        display: flex; align-items: center; gap: var(--e2);
        box-shadow: 0 -4px 16px rgba(15,23,42,.08);
    }
    .tw-comprar .tw-cantidad { margin-bottom: 0; flex: 0 0 auto; }
    .tw-comprar .tw-btn-cta { margin-top: 0; flex: 1; }
}

/* El campo del cupon quedaba de dos centimetros: .mp-input no tenia estilo y .btn-claro lleva
   width:100%, que dentro de una fila flex se come el ancho. */
.mp-input {
    width: 100%; min-width: 0; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r2);
    padding: 11px 12px; font-size: var(--t-lg); font-family: inherit; background: #fff;
    color: inherit; outline: none; box-sizing: border-box;
}
.mp-input:focus { border-color: var(--marca); }
.d-flex > .btn-claro, .d-flex > .btn-marca { width: auto; flex: 0 0 auto; }
/* El grupo de color puede mezclar muestras y fichas de texto (un "coral palo rosa" que no se
   reconoce). Que queden alineados. */
.tw-colores { align-items: center; }

/* ---- el contrato del mayorista (2026-11-12, parte 2) ---- */
.ct-fondo { min-height: 100vh; background: var(--fondo); padding: var(--e4) var(--e3); }
.ct-hoja {
    max-width: 720px; margin: 0 auto; background: var(--superficie);
    border: 1px solid var(--linea); border-radius: var(--r2);
    padding: var(--e4); box-shadow: var(--s1);
}
.ct-centro { text-align: center; padding: var(--e5) var(--e3); }
.ct-tit { margin-bottom: var(--e3); }
/* El contrato se lee como documento: tipografía de lectura, no la de la interfaz, y el salto de
   línea respetado tal como se guardó. */
.ct-texto {
    white-space: pre-wrap; word-wrap: break-word;
    font-family: Georgia, 'Times New Roman', serif; font-size: .92rem; line-height: 1.6;
    background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r1);
    padding: var(--e3); max-height: 46vh; overflow-y: auto; margin-bottom: var(--e4);
}
.ct-firma-caja { margin-bottom: var(--e3); }
.ct-lienzo {
    width: 100%; height: 180px; display: block;
    background: #fff; border: 2px dashed var(--linea); border-radius: var(--r1);
    cursor: crosshair;
}
.ct-firma-pie { display: flex; justify-content: flex-end; }
.ct-legal { line-height: 1.5; }

@media print {
    .ct-firma-caja, .ct-firma-pie, .ct-legal { display: none; }
    .ct-texto { max-height: none; overflow: visible; border: 0; }
    .ct-hoja { box-shadow: none; border: 0; }
}

/* ---- el portal del mayorista (2026-11-12, parte 2) ---- */
.may-fondo {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--fondo); padding: var(--e4) var(--e3);
}
.may-caja {
    width: 100%; max-width: 420px; background: var(--superficie);
    border: 1px solid var(--linea); border-radius: var(--r2);
    padding: var(--e5) var(--e4); box-shadow: var(--s1);
}
.may-centro { text-align: center; padding: var(--e4) 0; }
.may-marca { text-align: center; margin-bottom: var(--e4); }
.may-marca h1 { font-size: 1.5rem; margin: var(--e2) 0 2px; }
.may-marca p { color: var(--texto-2); font-size: .9rem; margin: 0; }

.may-campo { margin-bottom: var(--e3); }
.may-campo label { display: block; font-size: .85rem; color: var(--texto-2); margin-bottom: 4px; }
.may-campo input {
    width: 100%; padding: 11px 13px; font-size: 1rem;
    border: 1px solid var(--linea); border-radius: var(--r1);
    background: var(--fondo); color: var(--texto);
}
.may-campo input:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.may-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }

.may-boton {
    width: 100%; padding: 12px; font-size: 1rem; font-weight: 600;
    color: #fff; background: var(--marca); border: 0; border-radius: var(--r1); cursor: pointer;
}
.may-boton:disabled { opacity: .5; cursor: default; }
.may-pie { font-size: .82rem; color: var(--texto-2); text-align: center; margin: var(--e3) 0 0; }

/* ---- el panel de su cuenta ---- */
/* La pagina del portal era blanca sobre blanco y las tarjetas no resaltaban. El mismo gris
   azulado suave de la vitrina deja que el blanco de las tarjetas se levante. :has() pinta el
   body solo cuando la vista es del portal; un navegador muy viejo lo ignora y queda como antes. */
body:has(.may-panel) { background: var(--fondo); }
.may-panel { max-width: 760px; margin: 0 auto; padding: var(--e3); }
.may-barra { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.may-barra .crece { flex: 1 1 auto; min-width: 0; }
.may-tienda { font-weight: 650; }
.may-quien { font-size: .85rem; color: var(--texto-2); }

.may-numeros {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--e2); margin-bottom: var(--e3);
}
.may-num {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r2);
    padding: var(--e3); display: flex; flex-direction: column; gap: 2px;
}
.may-num .eti { font-size: .78rem; color: var(--texto-2); }
.may-num .num { font-size: 1.35rem; font-weight: 700; }
.may-num .pie { font-size: .76rem; color: var(--texto-2); }
.may-num.alerta .num { color: var(--peligro); }

.may-tarjeta {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r2);
    padding: var(--e4); margin-bottom: var(--e3);
}
.may-tit { font-weight: 650; margin-bottom: var(--e2); }
.may-ayuda { font-size: .85rem; color: var(--texto-2); margin-bottom: var(--e3); }
.may-vacio { color: var(--texto-2); font-size: .9rem; }

/* La tarjeta de producto del portal del mayorista. Una por producto, con sus tallas adentro.
   Habla el MISMO idioma visual que la vitrina publica (tw-*): la foto protagonista, el precio
   con la L chiquita y la cifra grande, el "quedan" en ambar. El mayorista ya conoce la tienda
   publica; su portal no deberia sentirse de otro sistema. */
.may-tit-suelto { margin: 0 0 var(--e2) 2px; }
.may-prod {
    padding: 0; overflow: hidden;
    transition: box-shadow .12s ease, border-color .12s ease;
}
.may-prod:hover { box-shadow: var(--s2); border-color: var(--linea-fuerte); }
.may-prod-cab {
    display: flex; gap: var(--e3); align-items: flex-start;
    padding: var(--e3); border-bottom: 1px solid var(--linea);
}
.may-prod-foto {
    width: 116px; height: 116px; flex: 0 0 116px; border-radius: var(--r2);
    object-fit: cover; background: #fff; border: 1px solid var(--linea);
    cursor: zoom-in;
}
.may-prod-foto.sinfoto {
    display: grid; place-items: center; font-size: 2rem; cursor: default;
    /* Los mismos colores del hueco sin foto de la vitrina. */
    background: #EEF2F8; color: #B6C0D4; border: 0;
}
.may-prod-datos { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.may-prod-nom { font-weight: 600; line-height: 1.25; font-size: var(--t-md); }
.may-prod-des {
    font-size: .82rem; color: var(--tinta-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* El precio es .tw-precio, el de la vitrina; aqui solo lo que cambia. */
.may-precio { margin-top: 2px; }
.may-precio .pm { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 600; }
.may-hay { font-size: var(--t-xs); color: var(--alerta); font-weight: 600; }

.may-vars { padding: 0 var(--e3) var(--e2); }
.may-var {
    display: flex; align-items: center; gap: var(--e2);
    padding: 7px 0 7px 8px; margin-left: -8px; border-bottom: 1px solid var(--linea);
    border-radius: var(--r1);
}
.may-var:last-child { border-bottom: 0; }
/* La fila que lleva cantidad se nota: es lo que va en el pedido. */
.may-var.pedida { background: var(--marca-suave); }
.may-var.pedida .may-var-nom { font-weight: 600; }
.may-var-nom { flex: 1 1 auto; min-width: 0; font-size: .88rem; }
.may-var-imp {
    flex: 0 0 auto; min-width: 74px; text-align: right;
    font-size: .84rem; font-weight: 700; white-space: nowrap;
}

/* Menos, la casilla y mas, como una sola pieza. */
.may-cant-caja {
    display: flex; align-items: stretch; flex: 0 0 auto;
    min-height: 38px; /* que el dedo tenga donde caer */
    border: 1px solid var(--linea-fuerte); border-radius: var(--r1);
    overflow: hidden; background: var(--superficie);
}
.may-cant-caja .paso {
    /* reserva.css tambien tiene una clase .paso (los pasos de la reserva) con margen abajo;
       aqui el margen 0 la neutraliza, si no el boton queda aplastado contra el borde de arriba. */
    width: 38px; margin: 0; border: 0; background: var(--fondo); cursor: pointer;
    font-size: 1.05rem; font-weight: 700; color: var(--tinta-2);
    font-family: inherit; line-height: 1; padding: 0;
    display: grid; place-items: center;
}
.may-cant-caja .paso:disabled { opacity: .35; cursor: default; }
.may-cant-caja .paso:active:not(:disabled) { background: var(--marca-suave); color: var(--marca); }
.may-cant-caja .may-cant {
    width: 52px; border: 0; border-left: 1px solid var(--linea); border-right: 1px solid var(--linea);
    text-align: center; font-size: .95rem; font-weight: 600; font-family: inherit;
    -moz-appearance: textfield; appearance: textfield; border-radius: 0;
}
.may-cant-caja .may-cant::-webkit-outer-spin-button,
.may-cant-caja .may-cant::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.may-cant-caja .may-cant:focus { outline: 2px solid var(--marca); outline-offset: -2px; }

.may-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.may-tabla th {
    text-align: left; font-weight: 600; color: var(--texto-2); font-size: .78rem;
    padding: 6px 8px; border-bottom: 1px solid var(--linea);
}
.may-tabla td { padding: 9px 8px; border-bottom: 1px solid var(--linea); }
.may-tabla tr:last-child td { border-bottom: 0; }
.may-tabla .der { text-align: right; }
.may-tabla tr.vencida td { background: color-mix(in srgb, var(--peligro) 7%, transparent); }
.etq-roja {
    display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 600;
    color: var(--peligro);
}

.may-rep {
    display: flex; align-items: center; gap: var(--e2);
    padding: var(--e2) 0; border-bottom: 1px solid var(--linea);
}
.may-rep:last-child { border-bottom: 0; }
.may-rep .crece { flex: 1 1 auto; min-width: 0; }
.may-motivo { font-size: .8rem; color: var(--peligro); margin-top: 2px; }
.etq {
    font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.etq.verde { background: color-mix(in srgb, var(--exito) 15%, transparent); color: var(--exito); }
.etq.roja  { background: color-mix(in srgb, var(--peligro) 15%, transparent); color: var(--peligro); }
.etq.gris  { background: var(--fondo); color: var(--texto-2); }

/* El portal se ve sobre todo desde un teléfono: dos columnas ahí aprietan, y la tabla de
   facturas no cabe entera. En pantalla chica se quedan las tres columnas que de verdad
   contestan la pregunta: qué documento, cuándo vence y cuánto debe. */
@media (max-width: 560px) {
    .may-fila2 { grid-template-columns: 1fr; }
    .may-tabla .chica { display: none; }
    .may-tabla { font-size: .85rem; }
    .may-tabla th, .may-tabla td { padding: 8px 4px; }
}

/* 2026-11-12: el visor de la foto en el portal del mayorista. A 78px no se ve la tela, y quien
   pide por docenas mira el detalle antes de comprometerse. */
.may-visor {
    position: fixed; inset: 0; z-index: 9000; cursor: zoom-out;
    /* Casi opaco: con .9 el texto de la pagina se seguia leyendo detras del pie de foto y
       quedaba sucio. Lo que importa aqui es la foto, nada mas. */
    background: rgba(0, 0, 0, .96);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 16px;
}
.may-visor img {
    max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px;
}
.may-visor-pie {
    color: #fff; text-align: center; font-weight: 600; line-height: 1.4;
    background: rgba(0, 0, 0, .55); border-radius: 10px; padding: 8px 14px;
    max-width: 100%;
}
.may-visor-pie span {
    display: block; font-weight: 400; font-size: .8rem; opacity: .7; margin-top: 2px;
}

/* ==== la portada configurable (spec-portada-negocio) ==================================
   Bloques que el dueño enciende sobre el catalogo. El hero es el protagonista; todo lo
   demas queda tranquilo. Los colores salen de la marca del negocio: --marca (primario),
   --acento (secundario o derivado) y sus tintas, que la aplicacion decide por contraste. */

.pt-hero {
    position: relative; overflow: hidden;
    min-height: 240px;
    background: var(--marca) center/cover no-repeat;
    display: grid; align-items: end;
}
/* Texto SIEMPRE blanco sobre velo oscuro cuando hay foto: legible con cualquier imagen. */
.pt-hero-velo {
    width: 100%; padding: 56px var(--e3) var(--e4);
    background: linear-gradient(transparent, rgba(10, 14, 24, .72));
    color: #fff;
}
.pt-hero.sinfoto { min-height: 0; }
/* En pantalla ancha el hero es más alto: de una foto apaisada 8:3 se ve casi toda, no solo la banda central. */
@media (min-width: 1000px) { .pt-hero { min-height: 400px; } .pt-previa .pt-hero { min-height: 240px; } .pt-hero.sinfoto { min-height: 0; } }
.pt-hero.sinfoto .pt-hero-velo { background: none; color: var(--marca-tinta); padding-top: var(--e4); }
.pt-hero h1 {
    margin: 0 0 4px; font-size: clamp(1.45rem, 5.5vw, 2.1rem);
    line-height: 1.12; letter-spacing: -.02em; font-weight: 800;
    text-wrap: balance; max-width: 22ch;
}
.pt-hero p { margin: 0 0 14px; font-size: .95rem; opacity: .92; max-width: 48ch; }
.pt-hero-btn {
    border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem;
    padding: 11px 22px; border-radius: 999px;
    background: var(--acento); color: var(--acento-tinta);
}
.pt-hero-btn:active { filter: brightness(.92); }

.pt-conf {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: var(--e2) var(--e3); background: var(--superficie);
    border-bottom: 1px solid var(--linea);
}
.pt-conf-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .82rem; font-weight: 600; color: var(--tinta);
    padding: 7px 12px; border: 1px solid var(--linea); border-radius: 999px;
    background: var(--fondo);
}
.pt-conf-item .bi { color: var(--acento); font-size: .95rem; }

.pt-dest {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2);
    padding: var(--e3);
}
@media (min-width: 720px) { .pt-dest { grid-template-columns: repeat(4, 1fr); } }
.pt-dest-tarjeta {
    border: 1px solid var(--linea); border-radius: var(--r2); overflow: hidden;
    background: var(--superficie); cursor: pointer; padding: 0; text-align: left;
    font: inherit; transition: box-shadow .12s ease;
    display: grid; /* un button no apila su contenido solo: foto arriba, nombre abajo */
    justify-items: stretch; align-content: start;
    /* Una sola columna a lo ancho. Sin esto la columna implicita mide lo que mide el
       nombre, y el hueco sin foto queda del ancho de la palabra "Bolsos". */
    grid-template-columns: minmax(0, 1fr); width: 100%;
}
.pt-dest-tarjeta > * { width: 100%; }
.pt-dest-tarjeta:hover { box-shadow: var(--s2); }
.pt-dest-tarjeta img, .pt-dest-vacia {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
}
.pt-dest-vacia {
    display: grid; place-items: center; font-size: 1.6rem;
    background: #EEF2F8; color: #B6C0D4;
}
.pt-dest-nom {
    display: block; padding: 9px 12px; font-weight: 700; font-size: .9rem;
    border-top: 3px solid var(--acento);
}

.pt-historia {
    margin: 0 var(--e3) var(--e2); padding: var(--e3);
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r2);
}
.pt-historia h2 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -.01em; }
.pt-historia p { margin: 0; font-size: .92rem; color: var(--tinta-2); line-height: 1.55; }
.pt-historia-dir {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px; font-size: .84rem; font-weight: 600; color: var(--tinta-2);
}
.pt-historia-dir .bi { color: var(--acento); }

/* La vista previa de Mi portada: un telefono de 412px dentro del panel, pegado al deslizar. */
.pt-previa-marco { position: sticky; top: 80px; }
.pt-previa {
    max-width: 412px; margin: 0 auto; overflow: hidden;
    border: 1px solid var(--linea); border-radius: 18px;
    background: var(--fondo); box-shadow: var(--s2);
    padding-bottom: var(--e2);
}
.pt-previa-vacia {
    padding: 40px var(--e3); text-align: center; font-size: .9rem; color: var(--tinta-2);
}
/* Dentro de la vista previa manda el ancho del TELEFONO simulado, no el de la ventana. */
.pt-previa .pt-dest { grid-template-columns: repeat(2, 1fr); }

/* ====================== pie «Siguenos» (PieRedes) ====================== */
.pr-pie {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
    padding: 22px 16px 28px; margin-top: 8px;
    border-top: 1px solid var(--linea, #e8eaee); color: var(--tinta, #15181d);
}
.pr-sig { font-weight: 700; font-size: .95rem; letter-spacing: .01em; color: var(--marca, inherit); }
.pr-iconos { display: flex; gap: 10px; }
.pr-red {
    width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center;
    background: var(--marca, #1E40AF); color: var(--marca-tinta, #fff); font-size: 1.15rem;
    text-decoration: none; transition: transform .12s ease, filter .12s ease;
}
/* Cada red con su propio color de marca, como los reconoce todo el mundo: asi se ven actuales
   y no cuatro bolitas iguales. El texto «Siguenos» y el nombre si van en el color del negocio. */
.pr-red.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: #fff; }
.pr-red.facebook  { background: #1877F2; color: #fff; }
.pr-red.tiktok    { background: #010101; color: #fff; box-shadow: inset 0 0 0 1px #2b2b2b; }
.pr-red.whatsapp  { background: #25D366; color: #fff; }
.pr-red:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pr-red:active { transform: none; filter: brightness(.92); }
.pr-nombre { flex-basis: 100%; text-align: center; font-size: .82rem; opacity: .65; }