/* Tienda publica del revendedor. --marca y --marca-2 las inyecta el layout
   con los colores que el revendedor configuro en su panel. */

:root {
    --tinta: #14202e;
    --gris: #667085;
    --linea: #e5e9f0;
    --papel: #fff;
    --fondo: #fbfcfe;
    --exito: #067a53;
    --alerta: #9a6700;
    --error: #b42318;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Urbanist", system-ui, sans-serif;
    color: var(--tinta);
    background: var(--fondo);
    line-height: 1.55;
}

h1, h2, h3 { font-family: "Lexend Deca", system-ui, sans-serif; line-height: 1.15; }

.ancho { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; }
.seccion { padding: 2.5rem 1.25rem; }
.seccion--angosta { max-width: 420px; margin: 0 auto; }
.seccion--lectura { max-width: 720px; margin: 0 auto; }
.seccion--lectura h2 { margin-top: 1.75rem; }
.seccion--lectura p { line-height: 1.6; }
.seccion__titulo { font-size: 1.35rem; margin: 0 0 1.25rem; }
.seccion__nota { color: var(--gris); font-size: .85rem; margin-top: 1rem; }

.cuenta-cabecera { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.qr-pago { display: block; width: 220px; max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 8px; margin: .75rem 0; }

.visualmente-oculto {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Cabecera ---- */
.cabecera { background: var(--papel); border-bottom: 1px solid var(--linea); }

.cabecera__interior {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 68px; flex-wrap: wrap;
}

.logotipo {
    font-family: "Lexend Deca", sans-serif;
    font-weight: 700; font-size: 1.15rem;
    color: var(--marca); text-decoration: none;
    display: flex; align-items: center; gap: .6rem;
}

.logotipo__imagen { height: 36px; width: auto; max-width: 180px; object-fit: contain; }

.cabecera__nota { color: var(--gris); font-size: .82rem; }

/* ---- Portada ---- */
.portada {
    padding: 4rem 0 3rem;
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--marca) 12%, transparent), transparent 55%),
        radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--marca-2) 10%, transparent), transparent 50%);
}

/* Imagen de fondo subida por el revendedor: un velo claro encima para que
   el titulo y el buscador se sigan leyendo bien sobre cualquier foto. */
.portada--con-imagen {
    background:
        linear-gradient(color-mix(in srgb, var(--fondo) 78%, transparent), color-mix(in srgb, var(--fondo) 78%, transparent)),
        var(--portada-imagen);
    background-size: cover;
    background-position: center;
}

.portada__titulo {
    font-size: clamp(1.9rem, 5vw, 3rem);
    margin: 0 0 .75rem;
    max-width: 18ch;
    text-wrap: balance;
}

.portada__bajada { color: var(--gris); font-size: 1.05rem; margin: 0 0 2rem; max-width: 50ch; }

/* ---- Buscador: el centro de la tienda ---- */
.buscador { max-width: 620px; }
.buscador__etiqueta { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }

.buscador__caja {
    display: flex; gap: .5rem;
    background: var(--papel);
    border: 2px solid var(--linea);
    border-radius: 14px;
    padding: .4rem;
    transition: border-color .15s ease;
}

.buscador__caja:focus-within { border-color: var(--marca); }

.buscador__caja input {
    flex: 1; min-width: 0;
    font: inherit; font-size: 1.05rem;
    border: 0; outline: 0; background: transparent;
    padding: .6rem .75rem; color: inherit;
}

/* Mismo tono suave en cualquier navegador: Firefox baja la opacidad del
   placeholder por defecto, Chrome no; sin esto se ve distinto segun el dispositivo. */
.buscador__caja input::placeholder { color: var(--gris); opacity: 1; }

.buscador__ayuda { color: var(--gris); font-size: .82rem; margin: .75rem 0 0; }
.buscador--compacto { max-width: 620px; margin: 0; }

/* Selector de extension, pegado al campo como una sola pieza. */
.buscador__extension {
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    border: 0;
    border-left: 1px solid var(--linea);
    background: transparent;
    color: var(--marca);
    padding: 0 .5rem;
    cursor: pointer;
    max-width: 8.5rem;
}

.buscador__extension:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

/* Lo que el buscador avisa cuando el nombre no sirve. */
.buscador__aviso {
    color: var(--error);
    font-size: .85rem;
    margin: .6rem 0 0;
}

.buscador__cargando { color: var(--gris); font-size: .95rem; padding: 1.5rem 0; }

.portada__resultado:not(:empty) { margin-top: 2rem; }

.franja-busqueda { background: var(--papel); border-bottom: 1px solid var(--linea); padding: 1.25rem 0; }

/* ---- Botones ---- */
.btn {
    font: inherit; font-weight: 600;
    padding: .75rem 1.4rem;
    border: 1px solid transparent; border-radius: 10px;
    background: var(--papel); color: var(--tinta);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    display: inline-block;
}

.btn--marca { background: var(--marca); color: #fff; }
.btn--marca:hover { filter: brightness(.92); }
.btn--grande { padding: .9rem 1.75rem; font-size: 1.02rem; }
.btn:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

/* ---- Precios ---- */
.rejilla-precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }

.precio-caja {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
}

.precio-caja__precio { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--marca); font-weight: 600; }
.precio-caja__nombre { font-family: "Lexend Deca", sans-serif; font-size: 1.9rem; font-weight: 700; margin: 0; color: var(--tinta); }
.precio-caja__periodo { color: var(--gris); font-size: .82rem; margin: .25rem 0 0; }

/* Todo lo que no sea "Dominios populares" se ve mas chico, para que las
   destacadas resalten sin dejar de leerse bien en cualquier pantalla. */
.rejilla-precios--compacta { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .65rem; }
.precio-caja--compacta { padding: 1rem .85rem; }
.precio-caja--compacta .precio-caja__precio { font-size: .88rem; margin-bottom: .3rem; }
.precio-caja--compacta .precio-caja__nombre { font-size: 1.25rem; }
.precio-caja--compacta .precio-caja__periodo { font-size: .74rem; }

/* ---- Pasos ---- */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 0; counter-reset: paso; }

.paso { counter-increment: paso; }

.paso__titulo { font-size: 1rem; margin: 0 0 .35rem; display: flex; align-items: center; gap: .6rem; }

.paso__titulo::before {
    content: counter(paso);
    background: color-mix(in srgb, var(--marca) 12%, transparent);
    color: var(--marca);
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .85rem; flex: none;
}

.paso p { color: var(--gris); margin: 0; font-size: .92rem; }

/* ---- Resultado de busqueda ---- */
.resultado {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.resultado--libre { border-color: color-mix(in srgb, var(--exito) 30%, var(--linea)); }

.resultado__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.resultado__dominio { font-size: clamp(1.3rem, 4vw, 2rem); margin: 0; overflow-wrap: anywhere; }

.marbete { padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.marbete--libre { background: #e6f6ef; color: var(--exito); }
.marbete--tomado { background: #fdeceb; color: var(--error); }

.resultado__precio { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 1.5rem; }
.resultado__monto { font-family: "Lexend Deca", sans-serif; font-size: 2rem; font-weight: 700; color: var(--marca); }
.resultado__periodo { color: var(--gris); }
.resultado__mensaje { color: var(--gris); margin: 0; }

/* ---- Formulario de contratacion ---- */
.contratar { border-top: 1px solid var(--linea); padding-top: 1.5rem; }
.contratar__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.contratar__nota { color: var(--gris); font-size: .82rem; margin: .75rem 0 0; }

.campo-t { display: flex; flex-direction: column; gap: .35rem; }
.campo-t--corto { max-width: 260px; }
.campo-t__etiqueta { font-weight: 600; font-size: .88rem; }
.campo-t__ayuda { color: var(--gris); font-size: .78rem; }

.campo-t input, .campo-t select {
    font: inherit;
    padding: .65rem .8rem;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--papel);
    color: inherit;
    width: 100%;
}

.campo-t input:focus-visible, .campo-t select:focus-visible {
    outline: 2px solid var(--marca); outline-offset: 1px;
}

.avanzado { margin-bottom: 1.25rem; }
.avanzado summary { cursor: pointer; font-size: .9rem; color: var(--marca); font-weight: 600; padding: .5rem 0; }

/* ---- Alternativas ---- */
.rejilla-alternativas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; }

.alternativa {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: .9rem 1.1rem;
    text-decoration: none; color: inherit;
}

.alternativa:hover { border-color: var(--marca); }
.alternativa__nombre { font-weight: 600; overflow-wrap: anywhere; }
.alternativa__ver { color: var(--marca); font-size: .85rem; font-weight: 600; flex: none; }

/* ---- Orden ---- */
.orden {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 16px;
    padding: 2rem;
    max-width: 640px;
}

.orden__paso { color: var(--gris); font-size: .82rem; font-weight: 600; margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .04em; }
.orden__titulo { font-size: 1.6rem; margin: 0 0 1.5rem; }

.orden__resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin: 0 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--linea); }
.orden__resumen dt { color: var(--gris); font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.orden__resumen dd { margin: 0; font-weight: 600; }
.orden__dominio { overflow-wrap: anywhere; }

.orden__bloque { margin-top: 1.75rem; }
.orden__subtitulo { font-size: 1.05rem; margin: 0 0 .5rem; }
.orden__bloque p { color: var(--gris); margin: 0 0 .5rem; }
.orden__contacto { font-size: .9rem; }
.orden__guardar { color: var(--gris); font-size: .82rem; margin-top: 2rem; }

.subida { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
.subida .campo-t { width: 100%; }

/* ---- Formas de pago ---- */
.pagos { margin-top: 1.75rem; }

.pagos__pestanas {
    display: flex; flex-wrap: wrap; gap: .4rem;
    border-bottom: 1px solid var(--linea);
    margin-bottom: 1.5rem;
}

.pestana {
    font: inherit; font-weight: 600; font-size: .92rem;
    background: none; border: 0; cursor: pointer;
    padding: .7rem 1rem;
    color: var(--gris);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.pestana:hover { color: var(--tinta); }
.pestana--activa { color: var(--marca); border-bottom-color: var(--marca); }
.pestana:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

.pagos__panel p { color: var(--gris); margin: 0 0 .75rem; }
.pagos__panel p strong { color: var(--tinta); }

.cuenta { margin: 1rem 0; display: grid; gap: .1rem; }
.cuenta__fila { display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linea); }
.cuenta__fila:last-child { border-bottom: 0; }
.cuenta dt { color: var(--gris); font-size: .85rem; min-width: 120px; margin: 0; }
.cuenta dd { margin: 0; }
.cuenta__numero { font-family: ui-monospace, "Courier New", monospace; font-size: 1.05rem; user-select: all; }

.carrito-items { margin: 1rem 0; display: grid; gap: .1rem; }
.carrito-items .cuenta__fila { justify-content: space-between; }

/* Ya se usaba en algunas plantillas sin definirse: la agregamos aqui. */
.es-tenue { color: var(--gris); font-size: .85rem; }

.paypal-caja { margin-top: 1.25rem; max-width: 420px; }

.orden__total { color: var(--marca); font-size: 1.15rem; }

/* ---- Notas ---- */
.nota { padding: .9rem 1.1rem; border-radius: 12px; margin: 1.25rem 0; border: 1px solid; font-size: .95rem; }
.nota--exito { background: #e6f6ef; border-color: #a9dfc8; color: var(--exito); }
.nota--error { background: #fdeceb; border-color: #f3bdb7; color: var(--error); }
.nota--aviso { background: #fff8e5; border-color: #f0dca4; color: var(--alerta); }

/* ---- Cabecera: ingresar ---- */
.cabecera__derecha { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

.cabecera__ingresar {
    color: var(--gris); text-decoration: none; font-size: .88rem; font-weight: 600;
    padding: .4rem .8rem; border-radius: 8px; border: 1px solid var(--linea);
}

.cabecera__ingresar:hover { color: var(--marca); border-color: var(--marca); }

.cabecera__ingresar--marca { background: var(--marca); border-color: var(--marca); color: #fff; }
.cabecera__ingresar--marca:hover { background: var(--marca-2); border-color: var(--marca-2); color: #fff; }

/* ---- Volver desde la orden ---- */
.orden__volver { margin-top: 1.5rem; }

/* ---- Conexion del dominio (contratar) ---- */
.conexion { border: 1px solid var(--linea); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.conexion__titulo { font-size: .88rem; font-weight: 600; padding: 0 .3rem; }

.conexion__opcion {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .55rem .2rem; cursor: pointer; font-size: .92rem;
}

.conexion__opcion input { margin-top: .2rem; flex: none; }
.conexion__recomendado { display: block; color: var(--marca); font-size: .78rem; font-weight: 600; margin-top: .15rem; }
.conexion__panel { padding: .25rem .2rem 1rem 1.9rem; }

/* ---- Formulario de contacto (pie) ---- */
.contacto { padding: 2.5rem 0; border-bottom: 1px solid var(--linea); }
.contacto__titulo { font-size: 1.3rem; margin: 0 0 .35rem; }
.contacto__ayuda { color: var(--gris); margin: 0 0 1.5rem; }
.contacto__formulario { display: grid; gap: 1rem; max-width: 620px; }
.contacto__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.contacto__formulario textarea { resize: vertical; }

/* Trampa para bots: invisible mas no display:none, para no delatarse a filtros simples. */
.campo-t-website { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Pie ---- */
.pie-tienda { border-top: 1px solid var(--linea); background: var(--papel); margin-top: 2rem; }
.pie-tienda__interior { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-top: 1.5rem; padding-bottom: 1.5rem; color: var(--gris); font-size: .85rem; }
.pie-tienda__legal { display: flex; gap: 1rem; flex-wrap: wrap; }
.pie-tienda__legal a { color: inherit; }

/* ---- Pagina "en construccion" ---- */
.proximamente { padding: 5rem 0; display: flex; justify-content: center; }

.proximamente__caja {
    max-width: 480px; text-align: center; display: flex; flex-direction: column; align-items: center;
}

.proximamente__marca { color: var(--marca); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.5rem; }

.proximamente__icono {
    width: 72px; height: 72px; border-radius: 20px;
    background: color-mix(in srgb, var(--marca) 10%, transparent);
    color: var(--marca);
    display: grid; place-items: center;
    margin-bottom: 1.5rem;
}

.proximamente__icono svg { width: 34px; height: 34px; }
.proximamente__titulo { font-size: 1.7rem; margin: 0 0 .75rem; }
.proximamente__texto { color: var(--gris); margin: 0 0 2rem; }

/* ---- Modal generico (mismo look que el del panel, con tokens de tienda) ---- */
.modal {
    position: fixed; inset: 0; z-index: 60; padding: 1rem;
    background: rgba(20, 32, 46, .55);
    display: flex; align-items: center; justify-content: center;
}
.modal[hidden] { display: none; }

.modal__caja {
    background: var(--papel); border-radius: 16px; padding: 1.75rem;
    width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 50px rgba(20, 32, 46, .25);
}
.modal__caja--ancha { max-width: 640px; }

.modal__cabecera {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}

.modal__titulo { font-size: 1.2rem; margin: 0; overflow-wrap: anywhere; }

.modal__cerrar {
    background: none; border: 0; font-size: 1.6rem; line-height: 1;
    color: var(--gris); cursor: pointer; padding: 0 .25rem; flex: none;
}
.modal__cerrar:hover { color: var(--tinta); }
.modal__cerrar:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }

/* Formulario dentro de un modal. Distinto de .contratar, que lleva una
   linea superior pensada para ir debajo del resultado de busqueda. */
.formulario-modal { display: flex; flex-direction: column; gap: 1rem; }
.formulario-modal .btn { width: 100%; }

/* ---- Otros productos ---- */
.rejilla-productos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }

.producto-caja {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.producto-caja:hover {
    border-color: color-mix(in srgb, var(--marca) 35%, var(--linea));
    box-shadow: 0 12px 28px rgba(20, 32, 46, .09);
    transform: translateY(-2px);
}

/* Las fotos las sube el revendedor y vienen en cualquier proporcion:
   altura fija + cover para que la rejilla no quede despareja. */
.producto-caja__foto {
    width: 100%; height: 170px; object-fit: cover; display: block;
    background: var(--fondo); border-bottom: 1px solid var(--linea);
}

/* Sin foto la card no se rompe: queda una banda con la inicial. */
.producto-caja__sinfoto {
    height: 170px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--marca) 8%, transparent);
    color: var(--marca); border-bottom: 1px solid var(--linea);
    font-family: "Lexend Deca", sans-serif; font-size: 2.5rem; font-weight: 700;
}

.producto-caja__cuerpo { padding: 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.producto-caja__nombre { font-size: 1.05rem; margin: 0; overflow-wrap: anywhere; }
.producto-caja__descripcion { color: var(--gris); font-size: .89rem; margin: 0; }
/* margin-top:auto empuja precio+accion al fondo: cards con descripciones
   de distinto largo alinean sus botones. */
.producto-caja__precio {
    font-family: "Lexend Deca", sans-serif; font-size: 1.35rem; font-weight: 700;
    color: var(--marca); margin: auto 0 .75rem;
}
.producto-caja__cuerpo .btn { align-self: stretch; text-align: center; }

.marbete--agotado { background: var(--fondo); color: var(--gris); border: 1px solid var(--linea); align-self: flex-start; }

@media (max-width: 640px) {
    .portada { padding: 2.5rem 0 2rem; }
    .buscador__caja { flex-direction: column; }
    .buscador__caja .btn { width: 100%; }
    /* Sin esto el selector queda angosto y descentrado, colgado entre el
       campo y el boton, ambos a lo ancho completo. */
    .buscador__extension { max-width: none; width: 100%; text-align: center; border-left: 0; border-top: 1px solid var(--linea); }
    .resultado, .orden { padding: 1.5rem; }
    .cabecera__interior { flex-wrap: wrap; row-gap: .5rem; }
    /* Carrito / Iniciar sesion / Registrarse: que puedan pasar a una
       segunda fila en vez de apretarse o desbordar el ancho de pantalla. */
    .cabecera__derecha { flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; }
    .cabecera__nota { display: none; }
    .modal__caja { padding: 1.25rem; }
}

/* ---- Estado del dominio: icono de informacion y su globo ---- */
.info-estado {
    width: 22px; height: 22px; flex: none;
    border-radius: 50%; border: 1px solid var(--linea);
    background: var(--papel); color: var(--gris);
    font-family: "Lexend Deca", serif; font-size: .8rem; font-weight: 700; font-style: italic;
    cursor: pointer; display: grid; place-items: center; padding: 0;
    transition: border-color .15s ease, color .15s ease;
}
.info-estado:hover { border-color: var(--marca); color: var(--marca); }
.info-estado:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.globo-estado {
    position: absolute; z-index: 70;
    background: var(--tinta); color: #fff;
    padding: .7rem .85rem; border-radius: 10px;
    font-size: .85rem; line-height: 1.45;
    box-shadow: 0 10px 25px rgba(20, 32, 46, .25);
}
.globo-estado[hidden] { display: none; }

.datos-dominio { margin: 0 0 1.25rem; display: grid; gap: .75rem; }
.datos-dominio dt { color: var(--gris); font-size: .8rem; font-weight: 600; margin: 0; }
.datos-dominio dd { margin: .15rem 0 0; font-weight: 600; }

/* Modal para ver la foto de un producto en su tamano real. */
.modal__caja--imagen {
    max-width: min(90vw, 900px);
    padding: 1rem;
    text-align: center;
}
.modal__imagen {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}
/* Envuelve la foto para poder superponerle el boton "Ver imagen" en una
   esquina, sin robarle espacio al cuerpo de la card. */
.producto-caja__marco-foto { position: relative; }
.producto-caja__marco-foto .producto-caja__foto { margin: 0; }

.producto-caja__ver-imagen-boton {
    position: absolute; right: .5rem; bottom: .5rem;
    background: rgba(20, 32, 46, .72); color: #fff;
    border: 0; border-radius: 999px; padding: .3rem .75rem;
    font: inherit; font-size: .75rem; font-weight: 600;
    cursor: pointer; backdrop-filter: blur(2px);
}
.producto-caja__ver-imagen-boton:hover { background: rgba(20, 32, 46, .88); }
.producto-caja__ver-imagen-boton:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }