/* ═══════════════════════════════════════════════════════════════════════════
   LA TIENDA — universal (orden del dueño 20/08/26: «este estilo de tienda
   debe ser universal y estar en los portales dentro de cada cliente»).
   La usan la promo pública Y el portal del cliente: una sola definición.
   Requiere vimedia-kit.css antes. Las clases .plan-t (tarjeta con la cara
   de marca) y .pr-armador/.arm-* (armar combo en vivo) viven SOLO acá.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── los planes: TARJETAS con la cara de su marca ── */
.planes-grupo { margin-top: 18px; }

.planes-grupo-h { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.planes-grupo-h h3 { font-size: 14px; font-weight: 600; }

.planes-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

/* la tarjeta: arriba el sólido REAL de la marca con su logo grande — es la
   cara que el cliente reconoce de lejos; abajo el precio manda. */
.plan-t {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: var(--k-blanco);
    border: 1px solid var(--k-g100);
    transition: transform var(--k-t), box-shadow var(--k-t), border-color var(--k-t);
}

.plan-t:hover,
.plan-t:focus-visible {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(16, 12, 40, .13);
}

.plan-t-cara {
    position: relative;
    display: grid;
    place-items: center;
    height: 104px;
    background: var(--marca, var(--k-acento));
}

.plan-t-cara img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .28));
    transition: transform var(--k-t);
}

.plan-t-cara i { font-size: 34px; color: #fff; }

/* el logo monocromo NEGRO sobre una marca oscura se pierde entero: se pasa a
   blanco. Lo decide PHP (promoLogoAclarar) leyendo el SVG, no el ojo.
   ⚠ va con el contenedor delante: `.plan-t-cara img` le gana en especificidad
   a un `.logo-claro` suelto y el filter del contenedor anulaba el invert. */
.plan-t-cara img.logo-claro,
.arm-app-ficha img.logo-claro,
.portada-app img.logo-claro,
.arma-flotante img.logo-claro {
    filter: brightness(0) invert(1) drop-shadow(0 3px 10px rgba(0, 0, 0, .35));
}
/* ⚠ Acá `.plan-t:hover .plan-t-cara img` llevaba `transform: scale(1.07)`, un
   parche para agrandar logos que se veían chicos. La causa real era el margen
   transparente del PNG, que ahora se recorta al subir (data/logo.php).
   El gesto de hover se queda: lo que se fue es el estirón. */
.plan-t:hover .plan-t-cara img { transform: translateY(-1px); }

/* los sellos son REALES: los pone el admin en la ficha del producto */
.plan-t-sello {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #14102a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.plan-t-sello-oferta { background: var(--k-warn); color: #3d2c00; }

.plan-t-cuerpo { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px 14px; }
/* dos líneas: «Adobe Creative Cloud» o «Gemini / Google AI» no entran en una
   sola a 157px y quedaban cortados a mitad de palabra */
.plan-t-nombre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
}
.plan-t-plan { font-size: 11.5px; font-weight: 400; color: var(--k-g600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.plan-t-precio { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }
.plan-t-precio b { font-size: 25px; font-weight: 600; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.plan-t-precio i { font-size: 11px; font-style: normal; font-weight: 400; color: var(--k-g600); }
.plan-t-precio s { font-size: 12px; font-weight: 400; color: var(--k-g400); }

.plan-t-anio { margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--k-g600); }

.plan-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--k-g100);
    transition: background var(--k-t);
}

.plan-fila:hover { background: var(--k-g50); }

.plan-nombre { flex: 1; min-width: 0; }
.plan-nombre b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-nombre small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--k-g600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.plan-precio { display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; }
.plan-precio b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-precio span { font-size: 11px; font-weight: 400; color: var(--k-g600); }


/* ═══ EL ARMADOR: la competencia promete 3% si te registras; acá el 10% se
   ve caer en vivo. Showcase oscuro (hermano del arma) con las fichas de
   marca a la izquierda y la cuenta clara a la derecha.                    */
.pr-armador {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding-top: clamp(30px, 4.4vw, 68px);
    padding-bottom: clamp(30px, 4.4vw, 68px);
    background: #14102a;
    color: #fff;
}

.pr-armador::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -8%;
    width: 46%;
    height: 150%;
    background: radial-gradient(closest-side, rgba(94, 44, 237, .5), transparent 72%);
    pointer-events: none;
}

.armador-cab { position: relative; max-width: 62ch; margin-bottom: 20px; }
.armador-cab h2 { font-size: clamp(21px, 3vw, 30px); font-weight: 600; letter-spacing: -.7px; line-height: 1.15; }
.armador-cab p { margin-top: 7px; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .75); }

.armador-cuerpo {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 268px;
    gap: 22px;
    align-items: start;
}

.armador-apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 9px;
}

/* cada app es un interruptor con su cara de marca; apagada se ve seria,
   encendida sube su sólido y aparece el visto */
.arm-app {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background var(--k-t), border-color var(--k-t), transform var(--k-t);
}

.arm-app:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }

/* elegida: se enciende de verdad — su marca entra al fondo, el filete la
   rodea y la ficha recupera el color (apagada va en gris) */
.arm-app.on {
    background: color-mix(in srgb, var(--marca, #5e2ced) 26%, transparent);
    border-color: var(--marca, var(--k-acento));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.arm-app-ficha {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--marca, var(--k-acento));
    flex-shrink: 0;
    filter: grayscale(.7) brightness(.8);
    transition: filter var(--k-t), transform var(--k-t);
}

.arm-app.on .arm-app-ficha { filter: none; transform: scale(1.06); }
.arm-app-ficha img { width: 84%; height: 84%; object-fit: contain; }

.arm-app-txt { min-width: 0; }
/* ⚠ El nombre es lo que identifica la app: cortarlo la vuelve irreconocible.
   Medido: la celda le da 77px y «Adobe Creative Cloud» necesita 138 — se leía
   «Adobe Creat…». Con una línea no hay ancho que alcance sin descuadrar la
   rejilla entera, así que se le permiten DOS. */
.arm-app-txt b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.25;
}
.arm-app-txt small { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .62); }
.arm-app.on .arm-app-txt small { color: rgba(255, 255, 255, .85); }

/* el visto aparece solo cuando la app entra al combo */
.arm-app-check {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    font-style: normal;
    font-size: 10px;
    color: transparent;
    transition: color var(--k-t), background var(--k-t), border-color var(--k-t);
}

.arm-app.on .arm-app-check { background: #8ef0c0; border-color: #8ef0c0; color: #0c2b1d; font-weight: 600; }

.armador-cuenta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
}

.arm-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 400; color: rgba(255, 255, 255, .72); }
.arm-linea b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }

/* el descuento solo existe cuando de verdad aplica */
.arm-linea-desc { opacity: .35; }
.arm-linea-desc.on { opacity: 1; }
.arm-linea-desc.on b { color: #8ef0c0; }

.arm-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, .72);
}

.arm-total span { flex: 1; }
.arm-total b { font-size: 30px; font-weight: 600; letter-spacing: -1px; color: #fff; font-variant-numeric: tabular-nums; }
.arm-total i { font-size: 11px; font-style: normal; }

.arm-aviso { font-size: 11.5px; font-weight: 400; color: rgba(255, 255, 255, .6); }
.arm-aviso-ok { color: #8ef0c0; }

/* La acción del armador NO se esconde tras el cursor. `.pr-accion` abre su
   nombre al pasar el mouse, que está bien para el cromo de la portada; acá es
   LA acción de todo el bloque y desde que vive en el inicio la ve todo el
   mundo. Un círculo mudo no dice a dónde lleva. */

/* ── LAS INSIGNIAS DE CONFIANZA ──────────────────────────────────────────
   Entrega, garantía, cuántos ya la tienen y si quedan pocos cupos. Medido
   contra el competidor el 20/08/26: su tienda no se ve llena por tener más
   apps, sino porque cada anuncio lleva estos datos y el nuestro ninguno.
   Filete fino y gris: son un apoyo del precio, no compiten con él. El color
   aparece solo cuando significa algo — quedan pocos. */
.plan-t-conf { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.conf-ins {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--k-g200); border-radius: 999px;
    background: var(--k-blanco);
    color: var(--k-g600); font-size: 10px; font-weight: 400;
    white-space: nowrap;
}
.conf-ins .k-ic { width: 11px; height: 11px; }
.conf-ins-urge { border-color: var(--k-warn); color: var(--k-warn-t); }


/* ── LA FICHA DE UNA APP ─────────────────────────────────────────────────
   La tarjeta se abre al centro y el cliente elige cuánto se lleva y por
   cuánto tiempo. Antes la tarjeta saltaba al armador y solo se podía comprar
   un mes de un cupo — las otras cinco combinaciones no existían. */
.tf-velo {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center;
    padding: 20px;
    background: rgba(18, 16, 38, .55);
    opacity: 0; pointer-events: none;
    transition: opacity 200ms var(--k-curva);
}
.tf-velo.on { opacity: 1; pointer-events: auto; }
.tf-velo[hidden] { display: none; }

.tf-hoja {
    width: min(420px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 18px;
    border-radius: 20px;
    background: var(--k-blanco);
    box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .5);
    transform: translateY(12px);
    transition: transform 220ms var(--k-curva);
}
.tf-velo.on .tf-hoja { transform: translateY(0); }

.tf-cab { display: flex; align-items: center; gap: 11px; margin-bottom: var(--k-e3); }
.tf-cab h3 { font-size: 15px; font-weight: 600; }
.tf-cab small { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.tf-cab > div { flex: 1; min-width: 0; }
.tf-cara {
    display: grid; place-items: center; flex: none;
    width: 46px; height: 46px; border-radius: 13px;
    background: var(--marca, var(--k-acento)); overflow: hidden;
}
.tf-cara img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.tf-cara img[src*="-lleno"] { width: 100%; height: 100%; border-radius: inherit; filter: none; box-shadow: inset 0 0 0 1px rgba(17,18,20,.12); }

.tf-cerrar {
    display: grid; place-items: center;
    width: 30px; height: 30px; padding: 0;
    border: 0; background: none; cursor: pointer; color: var(--k-g400);
    transition: color var(--k-t), transform var(--k-t);
}
.tf-cerrar:hover { color: var(--k-tinta); transform: scale(1.14); }
.tf-cerrar .k-ic { width: 16px; height: 16px; }
.tf-cerrar:focus-visible { outline: 2px solid var(--k-acento); outline-offset: 2px; border-radius: 8px; }

.tf-grupo + .tf-grupo { margin-top: var(--k-e3); }
.tf-grupo[hidden] { display: none; }
.tf-rotulo { display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.tf-ops { display: grid; gap: 6px; }

.tf-op {
    display: grid; gap: 1px;
    padding: 10px 12px; text-align: left;
    border: 1px solid var(--k-linea); border-radius: 12px;
    background: var(--k-blanco); cursor: pointer;
    font-family: inherit;
    transition: border-color var(--k-t), background var(--k-t);
}
.tf-op b { font-size: 12.5px; font-weight: 500; color: var(--k-tinta); }
.tf-op small { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.tf-op:hover { border-color: var(--k-g400); }
/* la elegida se marca con el filete del acento, no con relleno: el sólido
   está reservado para el botón que cobra */
.tf-op.on { border-color: var(--k-acento); background: var(--k-g50); }
.tf-op:focus-visible { outline: 2px solid var(--k-acento); outline-offset: 2px; }

.tf-pie {
    margin-top: var(--k-e4);
    padding-top: var(--k-e3);
    border-top: 1px solid var(--k-linea);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tf-total { display: grid; gap: 1px; }
.tf-total b { font-size: 20px; font-weight: 600; color: var(--k-tinta); }
.tf-total small { font-size: 11px; font-weight: 400; color: var(--text-muted); }
/* la acción del cobro NO se esconde tras el cursor */
.tf-ir { grid-template-columns: auto auto; gap: 9px; }
.tf-ir .nombre { opacity: 1; }

@media (max-width: 520px) {
    .tf-hoja { width: 100%; padding: 15px; }
    .tf-pie { flex-direction: column; align-items: stretch; }
    .tf-ir { justify-content: center; }
}

.arm-ir { margin-top: 4px; align-self: flex-start; grid-template-columns: auto auto; gap: 9px; }
.arm-ir .nombre { opacity: 1; }
.arm-ir-off { opacity: .45; pointer-events: none; }


/* el texto de la tienda no lleva tope de medida: son precios y nombres */
.plan-t p, .arm-app p { max-width: none; }

/* la app recién encendida desde el catálogo da un latido para que se vea */
@keyframes armRecien { 0%, 100% { transform: none; } 40% { transform: scale(1.05); } }
.arm-app-recien { animation: armRecien 620ms var(--k-curva) 2; }

/* ── CELULAR: la misma tienda, en formato de bolsillo ──────────────────────
   Medido antes: el catálogo ocupaba 3,9 PANTALLAS y el armador 2,5. Nadie
   baja tanto para ver 26 apps. Se pasa a rejilla de tres columnas con la
   ficha vertical: el logo identifica de un vistazo y el precio manda; lo
   secundario (plan, precio anual) vive en el checkout, no acá.           */
@media (max-width: 760px) {
    .planes-rejilla { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .plan-t { border-radius: 14px; }
    .plan-t-cara { height: 62px; }
    .plan-t-cara img { width: 62%; height: 62%; object-fit: contain; }
    .plan-t-cara i { font-size: 22px; }
    .plan-t-sello { top: 5px; left: 5px; padding: 2px 6px; font-size: 8.5px; letter-spacing: .02em; }
    .plan-t-cuerpo { padding: 7px 8px 9px; gap: 0; }
    .plan-t-nombre { font-size: 11px; -webkit-line-clamp: 1; line-clamp: 1; }
    .plan-t-plan, .plan-t-anio { display: none; }   /* el detalle, en el checkout */
    .plan-t-precio { margin-top: 4px; gap: 3px; }
    .plan-t-precio b { font-size: 15px; letter-spacing: -.3px; }
    .plan-t-precio i { font-size: 9px; }
    .plan-t-precio s { font-size: 9.5px; }

    .planes-grupo { margin-top: 12px; }
    .planes-grupo-h h3 { font-size: 12.5px; }

    /* el armador, en el mismo formato: se ve entero sin scroll infinito */
    .armador-cuerpo { grid-template-columns: 1fr; gap: 14px; }
    /* en una sola columna la cuenta va DEBAJO de las apps: pegarla la dejaria
       flotando sobre ellas y tapando justo lo que hay que tocar */
    .tienda-cliente .armador-cuenta { position: static; }
    .armador-apps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .arm-app {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 5px;
        padding: 9px 5px 8px;
        text-align: center;
        border-radius: 14px;
    }
    .arm-app-ficha { width: 30px; height: 30px; border-radius: 9px; }
    .arm-app-ficha img { width: 19px; height: 19px; }
    .arm-app-txt { width: 100%; }
    .arm-app-txt b { font-size: 10.5px; font-weight: 400; }
    .arm-app-txt small { font-size: 10px; }
    /* el visto se va a la esquina para no robar una fila */
    .arm-app-check { position: absolute; top: 5px; right: 5px; width: 15px; height: 15px; font-size: 8.5px; }
    .arm-app { position: relative; }

    .armador-cuenta { padding: 14px; gap: 7px; }
    .arm-total b { font-size: 25px; }
    .arm-ir { align-self: stretch; }
}

/* ═══ LA TIENDA DENTRO DEL PORTAL — la misma, en claro ════════════════════
   El armador nació para la web pública, que es oscura. Metido tal cual en el
   portal del cliente —que es blanco— se veía como un parche negro pegado a
   media pantalla. Acá se traduce al chrome claro: mismas piezas, mismos
   gestos, superficie blanca y hairlines. La lógica y el JS no cambian.     */
.tienda-cliente {
    background: var(--k-blanco);
    color: var(--k-tinta);
    padding: 0;
    margin: 0;
    border-radius: 0;
    overflow: visible;
}

.tienda-cliente::before { display: none; }   /* el radial del showcase sobra en claro */

.tienda-cliente .armador-cab { margin-bottom: 14px; }
.tienda-cliente .armador-cab h2 { font-size: clamp(17px, 2.2vw, 21px); }
.tienda-cliente .armador-cab p { color: var(--k-g600); font-size: 12.5px; }
.tienda-cliente .t-vivo { color: var(--k-acento); }

/* cada app: ficha blanca con hairline; encendida, su marca al frente */
.tienda-cliente .arm-app {
    background: var(--k-blanco);
    border-color: var(--k-g200);
    color: var(--k-tinta);
    box-shadow: none;
}

.tienda-cliente .arm-app:hover { background: var(--k-g50); border-color: var(--k-g400); }

.tienda-cliente .arm-app.on {
    background: color-mix(in srgb, var(--marca, #5e2ced) 10%, #fff);
    border-color: var(--marca, var(--k-acento));
    box-shadow: inset 0 0 0 1px var(--marca, var(--k-acento));
}

.tienda-cliente .arm-app-ficha { filter: grayscale(.35); }
.tienda-cliente .arm-app.on .arm-app-ficha { filter: none; }
.tienda-cliente .arm-app-txt small { color: var(--k-g600); }
.tienda-cliente .arm-app.on .arm-app-txt small { color: var(--k-tinta); }
.tienda-cliente .arm-app-check { border-color: var(--k-g200); }
.tienda-cliente .arm-app.on .arm-app-check { background: var(--k-ok); border-color: var(--k-ok); color: #fff; }

/* la cuenta: tarjeta clara, el total en el acento */
.tienda-cliente .armador-cuenta {
    background: var(--k-g50);
    border-color: var(--k-g100);
    backdrop-filter: none;
    /* ACOMPANA MIENTRAS SE ELIGE. Con el catalogo entero la reja de apps mide
       1016px y la cuenta 246: quieta, el cliente elige a ciegas la mayor parte
       del recorrido y pierde de vista lo que lleva gastado. Pegajosa, el total
       viaja con el. El 79px es la barra del portal (67) mas aire: si se pone
       en 0 la cuenta se mete DEBAJO de la barra, que tambien es pegajosa. */
    position: sticky;
    top: 79px;
}

.tienda-cliente .arm-linea { color: var(--k-g600); }
.tienda-cliente .arm-linea b { color: var(--k-tinta); }
.tienda-cliente .arm-linea-desc.on b { color: var(--k-ok); }
.tienda-cliente .arm-total { border-top-color: var(--k-g200); color: var(--k-g600); }
.tienda-cliente .arm-total b { color: var(--k-acento); }
.tienda-cliente .arm-aviso { color: var(--k-g600); }
.tienda-cliente .arm-aviso-ok { color: var(--k-ok); }

/* el catálogo de tarjetas, pegado debajo sin cortar el aire */
.tienda-catalogo { margin-top: 18px; }

/* ═══ EL LOGO QUE ES LA BALDOSA ════════════════════════════════════════
   Un logo que trae SU PROPIO FONDO (el rectángulo rojo de Netflix con la
   palabra dentro) no es un dibujo sobre la caja: ES la caja. Llena el cuadro
   entero y las esquinas redondeadas lo recortan, como el ícono de una app.
   Los que son un glifo suelto conservan su margen y dejan ver el color del
   cuadro alrededor.
   El normalizador (data/logo.php) marca cuál es cuál en el NOMBRE del
   archivo — así viaja solo a todas las pantallas, sin tocar ninguna. */
.product-icon img[src*="-lleno"],
.agr-cara img[src*="-lleno"],
.portada-app img[src*="-lleno"],
.arm-app-ficha img[src*="-lleno"],
.plan-t-cara img[src*="-lleno"],
.k-baldosa-cara img[src*="-lleno"] {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    filter: none;                 /* la sombra sobraba: el logo toca el borde */
    /* ⚠ Un logo de fondo BLANCO deja el cuadro blanco puro, y sobre papel
       blanco el cuadro desaparece — medido: rgb(255,255,255). Este filete
       hacia adentro dibuja el borde cuando hace falta y es invisible sobre
       cualquier color oscuro, así que sirve para todos sin excepción. */
    box-shadow: inset 0 0 0 1px rgba(17, 18, 20, .12);
}
/* ⚠ La cara de la tienda NO es cuadrada (178×104) y su alto sale de la
   proporción, no de una altura escrita. Con un alto así, `height:100%` cae a
   `auto` y la imagen toma SU proporción: un logo cuadrado se desbordaba 74px
   por debajo de la tarjeta. Medido, no supuesto. Anclarla a las cuatro
   esquinas la ata a la caja venga de donde venga el alto. */
.plan-t-cara { overflow: hidden; }
.plan-t-cara img[src*="-lleno"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* `contain`, no `cover`: la caja es más ancha que alta y recortar le comía
       la cabeza y los pies al logo. Así queda entero, y las franjas a los lados
       son del color de la marca —el mismo del logo—, así que no se ven. */
    object-fit: contain;
}